radio buttons won't check / uncheck

Question

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>

JavaScript does not require semicolons necessarily. I tried but it didn't make any difference. — layla l00, Jan 07 '21 at 05:02
Refer this, https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_radio — Sibin Rasiya, Jan 07 '21 at 05:06
for the link you have shared, the radios have the same name therefore one gets unchecked when you check the other. i.e. you can only select one. in my case the radios are completely unrelated and each of them refers to something different. i am trying to be able to check or un-check any. maybe all. maybe none. — layla l00, Jan 07 '21 at 05:09
if you want select only one you should give the same names. and select several radio buttons you should give different names in my answer. but in the second condition it's better to use checkbox. — Sato Takeru, Jan 07 '21 at 05:57

score 2 · Answer 1 · answered Jan 07 '21 at 05:01

2

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" />

answered Jan 07 '21 at 05:01

Dhrumil shah

611
4
23

can i know what does e refer to? is it something i need to define on my browser or just a variable ? because e shows undefined for this solution – layla l00 Jan 07 '21 at 05:04
`e` is the short var reference for event object which will be passed to event handlers. – Dhrumil shah Jan 07 '21 at 05:06

score 2 · Answer 2 · answered Jan 07 '21 at 05:11

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.

Sato Takeru · Answer 3 · 2021-01-07T05:54:10.317

 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>

score 2 · Accepted Answer · answered Jan 07 '21 at 05:26

2

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>

answered Jan 07 '21 at 05:26

GROVER.

4,071
2
19
66

@laylal00 Feel free to mark as having answered your question to help those that might come across the same issue in the future :) – GROVER. Jan 07 '21 at 06:22

score 0 · Answer 5 · answered Sep 14 '22 at 10:27

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.

radio buttons won't check / uncheck

5 Answers5