Question

我有一个HTML如下：

   <table class="responsive display table table-bordered">
    <tbody>
     <tr>
       <th>Sr No</th>
       <th>Student Code</th>
       <th>Student Name</th>
       <th>Date Of Birth</th>
       <th>Action</th>
       <th>Select&nbsp;&nbsp;&nbsp;<a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
     </tr>
    <form action="" method="post"></form>
    <tr>
      <td>1</td>
      <td>1001</td>
      <td>Rohit Singhal </td>
      <td>17-4-1988</td>
      <td> &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=update&amp;id=2" rel="tooltip" title="update" class="update">
          <i class="icon-pencil"></i>
        </a> &nbsp;&nbsp; 
        <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=delete&amp;id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
          <i class="icon-trash"></i>
        </a>
      </td>
      <td>
        <input name="deleteselect[]" value="2" type="checkbox">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>1003</td>
      <td>Lisa Kurdow </td>
      <td>24-7-1965</td>
      <td> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=update&amp;id=6" rel="tooltip" title="update" class="update"><i class="icon-pencil"></i></a> &nbsp;&nbsp; <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=delete&amp;id=6" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete"><i class="icon-trash"></i></a></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
    </tbody></table>

我有一个select all复选框，标识为checkAll我想要的是当我点击此复选框时，它应该选择/取消选中表格中的所有剩余复选框

我使用过代码：

<script type="text/javascript">
jQuery(document).ready(function (){
   $("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>

但是当我点击selectAll复选框时，它不会选中复选框。请帮帮我一些遗漏的东西？

Answer 1

如果出现jQuery(...).prop not a function错误，则表示您使用的是旧版本的jQuery（< 1.6）。很老，建议更新jQuery。然后使用此代码：

<script type="text/javascript">
  jQuery(document).ready(function (){
    jQuery("#checkAll").change(function () {
      if (this.checked)
        jQuery("input:checkbox").attr('checked', "checked");
      else
        jQuery("input:checkbox").removeAttr('checked');
    });
  });
</script>

Answer 2

您可以使用以下代码。我测试它工作正常。

    $(document).ready(function(){
    	$("#checkAll").change(function () {
    	  $("input:checkbox").attr('checked', this.checked);
    	});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<table class="responsive display table table-bordered">
        <tbody>
         <tr>
           <th>Sr No</th>
           <th>Student Code</th>
           <th>Student Name</th>
           <th>Date Of Birth</th>
           <th>Action</th>
           <th>Select&nbsp;&nbsp;&nbsp;<a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
         </tr>
        <form action="" method="post"></form>
        <tr>
          <td>1</td>
          <td>1001</td>
          <td>Rohit Singhal </td>
          <td>17-4-1988</td>
          <td> &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=update&amp;id=2" rel="tooltip" title="update" class="update">
              <i class="icon-pencil"></i>
            </a> &nbsp;&nbsp; 
            <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=delete&amp;id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
              <i class="icon-trash"></i>
            </a>
          </td>
          <td>
            <input name="deleteselect[]" value="2" type="checkbox">
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>1003</td>
          <td>Lisa Kurdow </td>
          <td>24-7-1965</td>
          <td> &nbsp;&nbsp;&nbsp;&nbsp;<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=update&amp;id=6" rel="tooltip" title="update" class="update"><i class="icon-pencil"></i></a> &nbsp;&nbsp; <a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&amp;action=delete&amp;id=6" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete"><i class="icon-trash"></i></a></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
        </tbody></table>

选中或取消选中该复选框

2 个答案: