Javascript或Jquery检查并取消选中所有复选框

我有一个带有复选框列表的表单。 我想创建一个checkAll和UncheckAll框以获得更好的用户体验。 我尝试了很多从Internet获得的代码，但没有一个能够工作。 你能帮我看看，告诉我是什么问题。 谢谢

 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 ; }   #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; }  
Please choose all the users whose group_id you want to replace with that of the uploaded file
 <form id="groupImportForm" action="" method="POST"> 
 
 
User ID
 
Last Name
 
First Name
 
Date_Of_Birth
 
Old Group_ID
 
New Group_ID
 
Update GroupID
 
 
  
 
 
 
 
 
 
 
<input type="checkbox" name="isReplaceGroupID[]" value="">
 
  
 
 
   
 
  
 
 

Answer 1

我使用jQuery，所以我从这里获取一些代码来更新代码而不使用jQuery： http ： //www.coderanch.com/t/120677/HTML-CSS-JavaScript/find-Checkboxes

这是一个有效的解决方案： http ： //jsfiddle.net/nvAtF/1/

这是与jQuery相同的解决方案： http ： //jsfiddle.net/nvAtF/2/

这是代码块：

 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

在jQuery中检查和取消选中所有复选框非常简单。 它的工作方式如下：

 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 

这是演示： jsfiddle.net/53fbc/

Answer 3

试试这个：

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

检查所有

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

取消所有

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版本的例子

使用jQuery同样瘦

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

jQuery的工作示例

Answer 5

Javascript函数切换（选中/取消选中）所有复选框。

 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

这是一个ES6单行程，可以通过classname取消选中：

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