如何使用循环中的复选框实现 Jquery 复选框检查全部/取消选中所有功能？答案

【问题标题】：How to implement Jquery checkbox check all/uncheck all function with a checkbox in a loop?如何使用循环中的复选框实现 Jquery 复选框检查全部/取消选中所有功能？
【发布时间】：2019-12-27 15:27:02
【问题描述】：

我在一个循环中有一个复选框，我想使用 jquery 选中所有并取消选中所有。我已经实现了一个 Jquery 检查所有并取消选中所有功能，但是，它只在检查了 checkall 标记的复选框后才检查循环中的第一个复选框。我将如何正确实现这一点？代码如下所示。谢谢。

查看：

<div><input type="checkbox" class="check_all"> Check all</div>
  <?php
      $cnt=0;
   echo form_open('students/del_student/'.$tennant_id);
    foreach($data_student as $row)
    {
      $cnt++;
      echo"<input type='hidden' name='course_occasion_id'   value=".$row->course_occasion_id.">";
      ?>
       <address>

     <div class="row-fluid">
      <div class="span2"><input type='checkbox' name='student_id[]'id="student_id" value="<?php echo $row->id;?>"  ></div>
      <div class="span4"><?php echo anchor("students/student/$row->id/$tennant_id",$row->first_name);?></div>
      <div class="span4"><?php echo $row->last_name;?> </div>
      <div class="span2"><?php echo $row->status;?> </div>
     </div>
     </address>
    <?php
     }
     ?>

Javascript：

 <script type="text/javascript">

   $('.check_all').on('click', function () {


    $("#student_id").prop('checked', $(this).prop('checked'));


   });
  </script>

输出：

【问题讨论】：

ID 在上下文页面上必须是唯一的，请改用类

标签： javascript jquery codeigniter

【解决方案1】：

您正在创建具有相同 id 的每个复选框：

id="student_id"

ID 在整个页面中应该是唯一的。

相反，将其更改为一个类，例如class="student_id" 并更改您的选择器以查找类：

$(".student_id").prop('checked', $(this).prop('checked'));

【讨论】：

$(this).prop('checked') === this.checked

【解决方案2】：

ids 在文档中必须是唯一的。

在 jQuery 中，使用 .class 代替 #id，在 HTML 中使用 class=... 代替 id=...。

$(".student_id").prop('checked', $(this).prop('checked'));

看看 HTML 中的the difference between id and class：

id = name [CS]

此属性为元素分配名称。此名称在文档中必须是唯一的。
class = cdata-list [CS]

此属性将一个类名或一组类名分配给一个元素。 可以为任意数量的元素分配相同的类名称。多个类名必须用空格字符分隔。

【讨论】：

【解决方案3】：

改用class..因为id 是唯一的

  $('.check_all').on('click', function () {

    $(".std").prop('checked', $(this).prop('checked'));

   });

和你的 html

<div class="span2"><input type='checkbox' name='student_id[]' class="std" value="<?php echo $row->id;?>"  ></div>

【讨论】：

【解决方案4】：

下面的 javascript 有助于在一个循环中检查取消选中所有复选框选项。

function FunCheckAll(obj) {            
if (obj.checked) {
    $('.chkSelectAll').each(function (i, e) {
        if ($(e).is(":not(:visible())") == false) {
            $(e).prop('checked', true);                        
        }
    });
}
else {
    $('.chkSelectAll').each(function (i, e) {
        $(e).prop('checked', false);                    
    });
}

}

chkSelectAll 是与复选框一起使用的类的名称。

【讨论】：