How to check one check box if other check boxes checked using javascript?

Question

var select_all = document.getElementById("select_all"); //select all checkbox
var checkboxes = document.getElementsByName("testc"); //checkbox items

//select all checkboxes
select_all.addEventListener("change", function(e) {
  for (i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = select_all.checked;
  }
});


for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function(e) { //".checkbox" change
    //uncheck "select all", if one of the listed checkbox item is unchecked
    if (this.checked == false) {
      select_all.checked = false;
    }
    //check "select all" if all checkbox items are checked
    if (document.querySelectorAll('.checkbox:checked').length == checkboxes.length) {
      select_all.checked = true;
    }
  });
}

<li><input type="checkbox" id="select_all" /> Selecct All</li>
<ul>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 1</li>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 2</li>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 3</li>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 4</li>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 5</li>
  <li><input class="checkbox" type="checkbox" name="testc"> This is Item 6</li>
</ul>

The above code is working fine. but here the part below is checking the CSS of the checkboxes to apply the condition. i want to check the name of the checkboxes. Looking for a solution ?

//check "select all" if all checkbox items are checked
 if (document.querySelectorAll('.checkbox:checked').length == checkboxes.length) {
     select_all.checked = true;
     }
 });

Not sure what you mean by 'check the name'. But if you want to access the names of a checkbox you can do it like this - checkboxes[0].getAttribute('name') — Ankit
– Ankit, Commented Dec 10, 2019 at 11:48

Yukulélé · Accepted Answer · 2019-12-10 13:42:42Z

1

While change event bubble you can addEventListener on parent element.
Use find() to check if one input is not checked.
If you want to select by name use input[name="testc"]
What about #select_all state if some inputs are checked?

var checkall = document.getElementById("select_all")
var ul = document.querySelector('ul#checkbox-list')
var checkboxes = Array.from(ul.querySelectorAll('input[name="testc"]')) /* 3 */

checkall.addEventListener('change', () => {
  checkboxes.forEach(elm => (elm.checked = checkall.checked))
})

ul.addEventListener('change', () => { /* 1. */ 
  checkall.checked = !checkboxes.find(elm => !elm.checked) /* 2. */ 
})

stronger example here solving /* 4. */: https://codepen.io/yukulele/pen/PNNdvw?editors=0010

edited Dec 10, 2019 at 13:42

answered Dec 10, 2019 at 11:53

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R J Over a year ago

Thank you for the brief explanation mate @yukulele.

Fabrizio Calderan · Accepted Answer · 2019-12-10 11:46:55Z

0

If you want to check the checkboxes by their names then change the selector inside querySelectorAll

if (document.querySelectorAll('[name="testc"]:checked').length == checkboxes.length) {
     select_all.checked = true;
}

answered Dec 10, 2019 at 11:46

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Collectives™ on Stack Overflow

How to check one check box if other check boxes checked using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related