2

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

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

这是我的 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>

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

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

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

4

8 回答 8

4 
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example .chkboxes').prop('checked', true);
        // $('#datatable_example input[type=checkbox]').prop('checked', true);
    });
});
于 2013-01-25T13:51:53.517 回答
1

您正在尝试检查一个名为复选框的类，而不是实际的复选框。通过其类型属性识别复选框 -

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example input[type="checkbox"]').prop('checked',true);
    });
});
于 2013-01-25T13:52:25.180 回答
0

你上课为class=\"chkboxes\"

在你给出的 jquery 中

  $('.checkboxes').attr('checked','checked');

纠正它

于 2013-01-25T13:54:03.867 回答
0

对于多个表使用这个

$('th input:checkbox').click(function(e) {

var table = $(e.target).closest('table'); $('td input:checkbox', table).attr('checked', e.target.checked);

});

于 2013-09-03T10:54:12.520 回答
0 
$('.chkboxes').attr('checked','checked');

班级不一样。

还可以考虑使用heredocs或结束 PHP?>并在您的 HTML 内容之后重新开始，<?php然后再关闭块。

于 2013-01-25T13:51:26.937 回答
0

另一个例子：

<script type="text/javascript">
$(document).ready(function(){
  $('#checkAll').click(function () {
    $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
  });
});
</script>

您只需要在fieldsetafter<form>和 close before中添加标签</form>，但只会选中字段集标签之间的复选框。

http://briancray.com/posts/check-all-jquery-javascript

于 2013-01-25T13:57:56.670 回答
0

做它的简单方法...

$("#buttonSelectAll").click(function () { if($("#Table").find('input:checkbox:first').attr("checked")==="checked") $('#Table input:checkbox').prop('checked', false); else $('#Table input:checkbox').prop('checked', true); });

于 2013-08-05T16:32:04.377 回答
0 
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example').find('.chkboxes').prop('checked', true);
        });
});
于 2016-01-21T16:04:17.140 回答