Javascript or jquery to check and uncheck

Question

I have a form with a list of checkboxes. I want to create checkAll and UncheckAll checkboxes for better user convenience. I tried a lot of code that I got from the Internet, but none of them worked. Can you help me take a look and tell me what the problem is. thanks

<script type="text/javascript"> function checkAll(field) { for (i = 0; i < field.length; i++) field[i].checked = true ; } function uncheckAll(field) { for (i = 0; i < field.length; i++) field[i].checked = false ; } </script> <style type="text/css"> #user_info { border-collapse:collapse; } #user_info td, #user_info th { width:100px; border:1px solid #CACACA; padding:5px; } #checkbox{ padding:20px 0 20px 250px; } </style> <p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p> <form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST"> <table id="user_info"> <thead> <th>User ID</th> <th>Last Name</th> <th>First Name</th> <th>Date_Of_Birth</th> <th>Old Group_ID</th> <th>New Group_ID</th> <th>Update GroupID</th> </thead> <tbody> <?php foreach($userGroupData as $value): ?> <tr> <td><?php echo $value['user_id']; ?></td> <td><?php echo $value['last_name']; ?></td> <td><?php echo $value['first_name']; ?></td> <td><?php echo $value['date_of_birth']; ?></td> <td><?php echo $value['group_id_old']; ?></td> <td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td> <td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td> </tr> <?php endforeach; ?> </tbody> </table> <div id="checkbox"> <input type="button" name="CheckAll" value="Check All" onClick="checkAll(document.myform.list)"> <input type="button" name="UnCheckAll" value="Uncheck All" onClick="uncheckAll(document.myform.list)"> </div> <div><input type="submit" value="Continue" /></div> </form> <br/> <br/> 

Answer 1

I live on jQuery, so I took the code from here to update the code without using jQuery: http://www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes

Here's a working solution: http://jsfiddle.net/nvAtF/1/

Here's the solution with jQuery: http://jsfiddle.net/nvAtF/2/

Here's the code block:

 function toggleCheckboxes(flag) { var form = document.getElementById('groupImportForm'); var inputs = form.elements; if(!inputs){ //console.log("no inputs found"); return; } if(!inputs.length){ //console.log("only one elements, forcing into an array"); inputs = new Array(inputs); } for (var i = 0; i < inputs.length; i++) { //console.log("checking input"); if (inputs[i].type == "checkbox") { inputs[i].checked = flag; } } } 

Answer 2

Checking and unchecking all checkboxes is very simple in jQuery. It works as follows:

 var all_checkboxes = jQuery(':checkbox'); // choose & store all checkboxes all_checkboxes.prop('checked', true); // check all of them all_checkboxes.prop('checked', false); // uncheck all of them 

Here is a demo: jsfiddle.net/53fbc/

Answer 3

Try the following:

 $('input:checkbox').attr('checked', true); 

to check all

 $('input:checkbox').attr('checked', false); 

for unchek all

Answer 4

 var form = document.getElementById('groupImportForm'); var inputs = form.elements; var checkboxes = []; for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == 'checkbox') { inputs[i].checked =true; } } 

Javascript example version

The same tone using jQuery

 $(".uncheckAll']").click(function() { $('.inputs').attr('checked','checked'); //add the atrribute checked // $('.inputs').removeAttr("checked"); //remove the attribute checked }); 

JQuery working example

Answer 5

Javascript function to switch (check / uncheck) everything.

 function checkAll(bx) { var cbs = document.getElementsByTagName('input'); for(var i=0; i < cbs.length; i++) { if(cbs[i].type == 'checkbox') { cbs[i].checked = bx.checked; } } } 

Answer 6

Here's a single-line ES6 to unmark all classes:

document.querySelectorAll('.classname').forEach((e)=>e.checked=false);