一次切换多个复选框

Question

I have these checkboxs:

'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">'; 

Which I can check or uncheck by clinking on them.
Now I am trying to add one more checkbox, which will check or uncheck all previous checkbox at once when clicking.

'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'

What is the JS code to execute when clicking the checkbox to check or uncheck all checkbox "toggleable" at once?

Answer 1

Here's an example on how to make this work in pure JavaScript.

 var checkAll = document.getElementById("id_check_uncheck_all"); checkAll.addEventListener("change", function() { var checked = this.checked; var otherCheckboxes = document.querySelectorAll(".toggleable"); [].forEach.call(otherCheckboxes, function(item) { item.checked = checked; }); }); 

 <label for="id_check_uncheck_all">Select All</label> <input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all"> <br/> <input type="checkbox" name="checkBox1" value="checked" class= "toggleable"> <input type="checkbox" name="checkBox2" value="checked" class= "toggleable"> <input type="checkbox" name="checkBox3" value="checked" class= "toggleable"> 

Answer 2

Just verify through JS that if particular checkbox checked. It has to check all of them.

JS Demo Below: UPDATE

Just added id to your inputs.

 function checkAll(x) { if(x.checked == true){ document.getElementById('c1').checked = true; document.getElementById('c2').checked = true; document.getElementById('c3').checked = true; }else{ document.getElementById('c1').checked = false; document.getElementById('c2').checked = false; document.getElementById('c3').checked = false; } } 

 Multiple Check Box Below: <br> <input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1"> <input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2"> <input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3"> </br> Check below to Check them all: </br> <input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all"> 

JQuery Demo below:

 $('#checkAll').click(function () { $('input:checkbox').prop('checked', this.checked); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="checkbox" id="checkAll" > Check All </br> <input type="checkbox" id="checkItem"> Item 1 <input type="checkbox" id="checkItem"> Item 2 <input type="checkbox" id="checkItem"> Item3 

Answer 3

try it

 $(document).ready(function() { $(".toggleable").click(function() { var checkboxes = $(".toggleable"); if($(this).prop("checked")) checkboxes.prop("checked",true); else checkboxes.prop("checked",false); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="checkBox1" class= "toggleable"> <input type="checkbox" name="checkBox2" class= "toggleable"> <input type="checkbox" name="checkBox3" class= "toggleable">