CODEWITHSUNDEEP
javascripthtml
Xtof
Xtof

Reputation: 425

How to toggle a radio button with a label

I would like to unselect a radio button when I click on the label and the following code only works as expected if I click on the button itself.

How to link the behaviour of the label to the button?

<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML 
</label>

<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript 
</label>

Upvotes: 1

Views: 3041

Answers (5)

Xtof
Xtof

Reputation: 425

After many attempts I finally managed to code a working solution with some javascript.

The problem is that as soon as the radio button is clicked its state changes. the previous value needs to be stored in order to know if it has to be unselected or not.

<main id="form">
    <label >
      <input type="radio" name="rad" id="Radio0" />Learn Html
    </label>
    <br><br>
    <label>
      <input type="radio" name="rad" id="Radio1" />Learn CSS
    </label>
    <br><br>
    <label>
      <input type="radio" name="rad" id="Radio2" />Learn Java
    </label>
</main>



<script>
    let buttons = document.querySelectorAll('#form input');
    for (button of buttons){
        button.dataset.waschecked="false";
        button.addEventListener('click', myFunction, false);
    }


function myFunction(e) {
  if (e.originalTarget.dataset.waschecked == "false"){
    
    for (button of document.querySelectorAll('#form input')){
        button.dataset.waschecked = "false";
    }
    e.originalTarget.dataset.waschecked = "true";
    e.originalTarget.checked =true;
  }else {
    for (button of document.querySelectorAll('#form input')){
        button.dataset.waschecked = "false";
    }
    e.originalTarget.checked =false;
  }
}
</script>

Any suggestion to improve this code is welcome.

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48693

If you want to de-select a radio button, you will need to reset the form.

form {
  display: flex;
  flex-direction: column;
}
<form>
  <label for="ckb-01">
    <input id="ckb-01" type="radio" name="choice" value="HTML" />
    Learn HTML
  </label>
  <label for="ckb-02">
    <input id="ckb-02" type="radio" name="choice" value="Java" />
    Learn JavaScript
  </label>
  <label for="ckb-03">
    <input id="ckb-03" type="radio" name="choice" value="Java" />
    Learn CSS
  </label>
  <input type="reset" />
</form>

Upvotes: 1

MBielski
MBielski

Reputation: 6620

Radio buttons don't work like you are thinking they do. To deselect one you need to either select another with the same name attribute or reset the form. The functionality that you are describing fits more with a checkbox than a radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for the specs. You may also want to take a look at this question/answer: Reset Particular Input Element in a HTML Form.

Also, there is no need to wrap your label tag around the input. The for attribute takes care of the linking.

Upvotes: 1

XMehdi01
XMehdi01

Reputation: 1

what do you mean by this.__chk

onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"

if you wanna select just one you could use simply type radio with group the options with one name='choice'

if you want check and uncheck multiple choices you could use checkbox

Upvotes: 0

XMehdi01
XMehdi01

Reputation: 1

  1. use the attribut for in the label
<label for='idHTML'>Learn HTML </label>
  1. give the radio the id equivalent
<input id='idHTML' type="radio" name="choice" />

Upvotes: 0

Related Questions