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使用name属性（model_selection[]）来获取所有复选框元素，并将其checked属性设置为checkAll元素（由this引用）在变更处理程序中）属性。

应该像

一样简单

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

演示：Fiddle

Answer 2

使用jQuery -

$("#checkAll").on("click", function () {
 var $input = $('input[name="model_selection[]"]');
 if(this.checked){
   $input.prop('checked',true);
 }else{
   $input.prop('checked',false);
 }
});

取消/全部选中，使用一个主复选框重置所有复选框，如GMAIL中所示

2 个答案: