JavaScript或jQuery用于检查和取消选中所有复选框

Question

我有一个带有多个复选框的表单。为了提高用户体验，我想创建一个全选和取消全选的框。我尝试了很多从互联网上得到的代码，但是它们都无法正常工作。你能否帮我看一下，并告诉我问题出在哪里。谢谢。

<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/>

- 庆峰 扈

---

他的代码在jsFiddle上。 - Chad

感谢将代码放入 jsFiddle。有人能帮我让它正常工作吗？谢谢。 - 庆峰 扈

@Chad：你的jsFiddle有误，当我点击按钮时它会显示两个函数都未定义。你应该选择例如“on wrap（head）”来消除这个特定的问题。但还是谢谢。 - Tadeck

Answer 1

在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/

- Tadeck

Answer 2

我使用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;
      }  
    }  
}

- Perry Tew

Answer 3

试试这个：

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

检查所有内容

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

取消所有选择：

- user1100481

---

如果使用jQuery 1.6+，应该使用.prop而不是.attr。http://api.jquery.com/prop/ - Darcy

抱歉，它不工作。你能包括 HTML 部分吗？谢谢。 - 庆峰 扈

这不是 input[type='checkbox'] 吗？算了，http://api.jquery.com/checkbox-selector/ 说 :checkbox 等同于 [type='checkbox']。 - Jamund Ferguson

类似的主题：https://dev59.com/N3RC5IYBdhLWcg3wD8tV - nopuck4you

Answer 4

这是一个ES6的一行代码，用于通过类名取消所有选中：

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

- jaywiz

Answer 5

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的工作示例

- Sameera Thilakasiri

---

抱歉，我尝试了你的解决方案，但并没有起作用。你能给我完整的解决方案，包括HTML吗？ - 庆峰 扈

请把你的解决方案带到 Fiddle 上，这样对我们理解会非常有帮助 :) - Sameera Thilakasiri

它在 Fiddle 上。http://jsfiddle.net/BRJng/。你能帮我让它工作吗？谢谢。 - 庆峰 扈

Answer 6

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;
     }
 }
}

- Prem Kumar Maurya