php - 使用 jQuery 选择表中的所有复选框

Question

我在表中使用复选框，并且表头中有一个复选框。

我想要完成的是，当我单击头部的复选框时，应选中表行下面的所有复选框。

这是我的 HTML:

            <form action="<?php $_PHP_SELF ?>" method="post">
        <div class="content top">
          <table id="datatable_example" class="responsive table table-striped table-bordered" style="width:100%;margin-bottom:0; ">
            <thead>
              <tr>
                <th style="width:0px; padding-right:0px;" class="no_sort"> <label class="checkbox ">
                    <input type="checkbox" id="checkAll" name="checkAll" class="select_all">
                  </label>
                </th>
                <th style="width:200px;" class="no_sort"> Institue </th>
                <th style="width:150px;" class="no_sort"> Education </th>
                <th style="width:300px;" class="no_sort"> Description </th>
                <th style="width:150px;" class="ue no_sort"> Started </th>
                <th style="width:150px;" class="ue no_sort"> Completion </th>
                <th class="ms no_sort "> Actions </th>
              </tr>
            </thead>
            <tbody>
              <?php echo $educations ?>
            </tbody>
          </table>
          <div class="row-fluid control-group">
            <div class="pull-left span6 " action="#">
              <div>


                <div class="controls inline input-large pull-left">                    
                  <select name="bulkaction" data-placeholder="Bulk actions: " class="chzn-select " id="default-select">
                    <option value=""></option>
                    <option value="delete">Delete</option>
                  </select>
                </div>
                <button type="submit" name="submitbulkaction" class="btn btn-inverse inline">Apply</button></form>

这是表中使用的 php 变量 $education..

$educations .= "<tr>
                <td><label class=\"checkbox\">
                    <input type=\"checkbox\" class=\"chkboxes\" name=\"ids[]\" value=\"$education_id\">
                  </label></td>
                <td class=\"to_hide_phone\"> $institue_name</td>
                <td class=\"to_hide_phone\"> $education_name</td>
                    <td>$education_desc</td>
                <td>$education_started</td>
                <td>$education_ended</td>
                <td class=\"ms\">
                <div class=\"btn-group1\"> 
                <a href=\"education-edit.php?id=$education_id\" class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\" edit \">
                <i class=\"gicon-edit\"></i></a> 
                <a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"View\">
                <i class=\"gicon-eye-open\"></i>
                </a> 
                <a class=\"btn  btn-small\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Remove\"><i class=\"gicon-remove \"></i></a> 
                </div>
                </td>
              </tr>";

我正在尝试设置背后的 Jquery..

    <script type="text/javascript">
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('.chkboxes').attr('checked','checked');
    });
});
    </script>

请告诉我我在这里做错了什么，以及如何解决这个问题？

我查看了关于相同问题复选框的其他问题，其中大多数都得到了解决，但当我应用相同的代码时，我仍然没有得到我想要的结果。

<小时/>

更新:我修复了你们提到的类名错误，谢谢，但现在出现了一些奇怪的问题。我的意思是现在它可以工作，但它不起作用，就像我单击复选框并且所有复选框都被选中一样。我必须刷新页面然后所有复选框都会被选中？这个问题是怎么回事？为什么我需要刷新页面才能发生该事件？

Answer 1

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example .chkboxes').prop('checked', true);
        // $('#datatable_example input[type=checkbox]').prop('checked', true);
    });
});