javascript - 使用一个主复选框取消/选中全部、重置所有复选框，就像 GMAIL 中一样

Question

我正在从数据库中读取不同的汽车型号，并将它们放入表单中，以便用户使用复选框选择一个或多个首选汽车型号。我正在使用以下代码段:

$("#checkAll").on("click", function () {

  var chk = document.getElementById('checkAll').checked;

  if (chk) {
    var arr = document.getElementsByTagName("input");
    for (var i in arr) {
        if (arr[i].name == 'check') arr[i].checked = true;
    }
  } else {
    var arr = document.getElementsByTagName("input");
    for (var i in arr) {
        if (arr[i].name == 'check') arr[i].checked = false;
    }
  }
});


 <form action="car_model.php" method="post" name="car_form" id="car_form">
   echo '<td class="caption" align="left" width="5%"><h2 class="table_heading">Select   car models</a><input type="checkbox" id="checkAll" name="checkAll"></h2></td>';    
   $q10 = "SELECT ...
   $r10 = mysqli_query ($dbc, $q10); 
   if (mysqli_num_rows($r10) > 0) {    
     while ($row10 = mysqli_fetch_array($r10, MYSQLI_ASSOC)) 
     {
       echo '<p class="normal_text"><input type="checkbox" name="model_selection[]" value="' . $row10['model_id'] . '" onclick="return KeepCount()"; />' . $row10['car_model_name'] . '</p></br>';      
     }
   }

 </form>

如何允许用户通过单击按钮来取消/选中全部、重置所有复选框选择？

Answer 1

据我所知，您可以使用 attribute equals selector 来使用名称属性(model_selection[])获取所有复选框元素并将其选中属性设置为 checkAll 元素(由更改处理程序中的 this 引用)属性。

它应该像这样简单

$("#checkAll").on("change", function () {
    $('input[ name="model_selection[]"]').prop('checked', this.checked)
});

演示:Fiddle