JavaScript - uncheck radio button if no checkboxes are checked

Question

I already asked a different question here: JavaScript - Select radio button if any checkbox is checked

I had another question so I am creating a new question for this. I was told to do the same. Hence, the new question. Hope it's alright.

I'm able to populate the radio button Radio 1 if any PD checkbox in Groups 1 and 2 are checked. Similarly, I'm also able to populate the radio button Radio 2 if any ID checkbox in Groups 1 and 2 are checked.

Following is the HTML:

<form>
   <h3>Radio Buttons</h3>
   <input type="radio" name="radio1" id="radio1"> Radio 1
   <br>
   <input type="radio" name="radio2" id="radio2">Radio 2
   <br>
   <br>

   <h3>Checkbox Groups</h3>

   <h4><u>Group 1</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
          <input id="pdcb" type="checkbox" name="G1PD1" onclick="validate()">G1 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G1PD2" onclick="validate()">G1 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
      <li>
         <input id="idcb" type="checkbox" name="G1ID1" onclick="validate()">G1 ID1</li>
      <li>
         <input id="idcb" type="checkbox" name="G1ID2" onclick="validate()">G1 ID2</li>
   </ul>

   <h4><u>Group 2</u></h4>
   <p align="center"><u>PD</u></p>
   <ul>
      <li>
     <input id="pdcb" type="checkbox" name="G2PD1" onclick="validate()">G2 PD1</li>
      <li>
         <input id="pdcb" type="checkbox" name="G2PD2" onclick="validate()">G2 PD2</li>
   </ul>
   <p align="center"><u>ID</u></p>
   <ul>
       <li>
          <input id="idcb" type="checkbox" name="G2ID1" onclick="validate()">G2 ID1</li>
      <li>
          <input id="idcb" type="checkbox" name="G2ID2" onclick="validate()">G2 ID2</li>
   </ul>
</form>

Following is the JS code:

function validate()
{
var pdcbClass = document.getElementsById("pdcb");
var idcbClass = document.getElementsById("idcb");
console.log(this);

for (var i = 0; i < pdcbClass.length; i++) 
{
    if (pdcbClass[i].checked == true) 
    {
        document.getElementById("radio1").checked = true;
        document.getElementById("radio2").checked = false;
    }
}

for (var i = 0; i < idcbClass.length; i++) 
{
    if (idcbClass[i].checked == true) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = true;
    }
}

var pdcbClass2 = document.getElementsByClassName("pdcb");
var idcbClass2 = document.getElementsByClassName("idcb");
console.log(this);

//if none of the checkboxes are checked, don't populate radio buttons
for (var i = 0; i < pdcbClass2.length; i++) 
{
    if (pdcbClass2[i].checked == false) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = false;
    }
}

for (var i = 0; i < idcbClass2.length; i++) 
{
    if (idcbClass2[i].checked == false) 
    {
        document.getElementById("radio1").checked = false;
        document.getElementById("radio2").checked = false;
    }
}
}

Now, my question is how would I get the radio buttons to not get populated if none of the checkboxes are checked?

PS: I need to write this in pure JavaScript. I cannot use jQuery.

UPDATE: The type of checkbox I'm using are of the form:

<im:checkbox id="IDCB" name="abcXYZ" onclick="validate()" />

gaetanoM gaetanoM · Accepted Answer · 2016-04-28T20:04:56

To check how many check boxes are checked you can write:

var hmchkObj = [].slice.call(document.querySelectorAll('form input[type="checkbox"]')).filter(function(element, index) {
  return element.checked == true;
}).length;

To select all input checkboxes you can use in querySelectorAll:

document.querySelectorAll('form input[type="checkbox"]')

This retuns a NodeList, so you need to convert to array in order to use the filter function. And on filtered elements (elements with checked == true) you can use the array property length. If this value is 0, this means no checkboxes selected.

JavaScript - uncheck radio button if no checkboxes are checked

1 Answers