radio buttons won't check / uncheck

user_14532734 0
Viewed 3584

I have some radio buttons in my web page. when clicking the radio button it checks but when i click again it doesn't un-check. i tried to add a JS function onclick

document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
        if(this.checked == true){
            this.checked = false;
        }
        else {
            this.checked = true;
        }
    }))

when I added this method it allowed my to uncheck but didn't allow me to check any of them! what can I be missing?

these are my checkboxes:

<input type="radio" id="name" name="name"><br>
<input type="radio" id="age" name="age"><br>
<input type="radio" id="email" name="email"><br>
radio-button forms html javascript
5 Answers

Example: Hold down Ctrl (āŒ˜ on mac) key to uncheck.

var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i++ ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}
<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

user_97243710

Use <input type="checkbox", not <input type="radio". Radio button is used where you have to select one of some options (which must have same name).

For example,

<input type="radio" name="gender" id="male" value="male"> <br>
<input type="radio" name="gender" id="female" value="female"> <br>
<input type="radio" name="gender" id="other" value="other">

Know more about radio button and check boxes.

user_67139240

They all have different name attribute values - therefore they can only be checked (because they're not comparing to another sibling radio value). I think you might be looking for type="checkbox" instead:

<input type="checkbox" id="name" name="name"><br>
<input type="checkbox" id="age" name="age"><br>
<input type="checkbox" id="email" name="email"><br>
user_64259360 

 document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
    if(this.value == 0){
          this.checked = true;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 1;
      }
      else {

          this.checked = false;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 0;
      }      
}))
<input type="radio" value="0" id="name" name="test"><br>
<input type="radio" value="0" id="age" name="test"><br>
<input type="radio" value="0" id="email" name="test"><br>

user_148554880

This code allows the user to deselect a radio button:

  document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
    if(! this.value0 || this.value0 == 0){
      this.checked = true;
      document.querySelectorAll('input[type="radio"][name="'+this.name+'"]').forEach(x=>x.value0=0);
      this.value0 = 1;
    } else {
      this.checked = false;
      document.querySelectorAll('input[type="radio"][name="'+this.name+'"]').forEach(x=>x.value0=0);
      this.value0 = 0;
    }
  }))

It improves the answer of Sato Takeru.

user_4744910
Related