我很惊讶没有人提到document.querySelectorAll()。纯JavaScript解决方案，工作在IE9+。

函数切换(源){ var checkboxes = document.querySelectorAll('input[type="checkbox"]'); For (var I = 0;I < checkboxes.length;我+ +){ If(复选框[i] != source) [我]复选框。Checked = source.checked; ｝ ｝ <input type="checkbox" onclick="切换(此);"/ >检查所有吗?< br / > <input type="checkbox" />Bar 1<br /> <input type="checkbox" />Bar 2<br /> <input type="checkbox" />Bar 3<br /> <input type="checkbox" />Bar 4<br />

使用jQuery:

// Listen for click on toggle checkbox $('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } else { $(':checkbox').each(function() { this.checked = false; }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <!-- select all boxes --> <input type="checkbox" name="select-all" id="select-all" />

1:添加onchange事件处理程序

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2:修改代码以处理已检查/未检查

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

下面的方法非常容易理解，你可以在几分钟内实现现有的表单

与Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

以HTML形式放在下面的按钮

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

只需使用javascript，

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

以HTML形式放在下面的按钮

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

这就是它的作用，例如，如果你有5个复选框，你点击选中全部，它就会选中全部，现在如果你取消选中所有复选框可能是点击每5个复选框，当你取消选中最后一个复选框时，选中全部复选框也会被取消选中

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

其实很简单:

const selectAllCheckboxes = () => {
  const checkboxes = document.querySelectorAll('input[type=checkbox]');
  checkboxes.forEach((cb) => { cb.checked = true; });
}