Question

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

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

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

Answer 2

您正在尝试检查名为复选框的类，而不是实际的复选框。按类型属性标识复选框 -

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

Answer 3

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

班级不同。

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

Answer 4

您将课程设为class=\"chkboxes\"

并在jquery中给出了

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

纠正它

Answer 5

另一个例子：

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

您只需在fieldset之后添加<form>代码并在</form>之前关闭，但只会检查字段集代码之间的复选框。

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

Answer 6

简单的方法......

$("#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); });

Answer 7

对于多表使用此

$（'th input：checkbox'）。点击（function（e）{

var table = $（e.target）.closest（'table'）; $（'td input：checkbox'，table）.attr（'checked'，e.target.checked）;

}）;

Answer 8

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example').find('.chkboxes').prop('checked', true);
        });
});

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

8 个答案: