Question

我创建了一个在行开头有复选框的表。我还做了一个＆＃34; Check All＆＃34;复选框。如果＆＃34;选中＆＃34;，将检查表格上的所有其他复选框。这很好。但是，当我＆＃34;未经检查＆＃34;桌子上有一个复选框，＆＃34;全部检查＆＃34;复选框仍然是＆＃34;已检查＆＃34;。当其他一个复选框发生变化时，如何取消选中它？

我的代码在这里：

脚本：

$('#chkall').change(function() {
var checkboxes = $(this).closest('table').find(':checkbox');
if($(this).is(':checked')) {
    checkboxes.prop('checked', true);
} else {
    checkboxes.prop('checked', false);
}
});

表（html）：

<table class="table table-hover">
                <tr>
                    <th><input type ="checkbox" id = "chkall"></th>
                    <th>Type</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Serial No</th>
                    <th>Asset No</th>
                    <th>Date of Purchased</th>
                    <th>Warranty Expiration</th>
                    <th>Status</th>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>

                <tr>
                    <td><input type ="checkbox"></td>
                    <td>Keyboard</td>
                    <td>HP</td>
                    <td>One time use keyboard</td>
                    <td>123456</td>
                    <td>789456</td>
                    <td>July 5, 2019</td>
                    <td>August 6, 2015</td>
                    <td>Available</td>
                </tr>
</table>

Answer 1

尝试将复选框的数量与复选的复选框数量进行比较

$('table').on('change', ':checkbox:not(#chkall)', function(){
   var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
       allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

   $('#chkall').prop('checked', allchecked);
});

如果您手动选中单个复选框

，此代码还将启用全部检查

完整示例

＆＃13;

$('#chkall').change(function() {
  var checkboxes = $(this).closest('table').find(':checkbox');
  if ($(this).is(':checked')) {
    checkboxes.prop('checked', true);
  } else {
    checkboxes.prop('checked', false);
  }
});

$('table').on('change', ':checkbox:not(#chkall)', function() {
  var checkboxes = $(this).closest('table').find(':checkbox:not(#chkall)'),
    allchecked = (checkboxes.length === checkboxes.filter(':checked').length);

  $('#chkall').prop('checked', allchecked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table table-hover">
  <tr>
    <th>
      <input type="checkbox" id="chkall">
    </th>
    <th>Type</th>
    <th>Brand</th>
    <th>Description</th>
    <th>Serial No</th>
    <th>Asset No</th>
    <th>Date of Purchased</th>
    <th>Warranty Expiration</th>
    <th>Status</th>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>

  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Keyboard</td>
    <td>HP</td>
    <td>One time use keyboard</td>
    <td>123456</td>
    <td>789456</td>
    <td>July 5, 2019</td>
    <td>August 6, 2015</td>
    <td>Available</td>
  </tr>
</table>

＆＃13;

Answer 2

您只需添加此事件处理程序：

$('#chkall').closest('table').on('change', ':checkbox:not(#chkall)', function() {
    if (!$(this).is(':checked'))
        $('#chkall').prop('checked', false);
});

Answer 3

您可以将复选框的数量与已选中的复选框进行比较。

如果在触发change事件时数字不相等，请取消选中#chkall元素：

Example Here

$('table :checkbox:not(#chkall)').on('change', function () {
  if ($(this).length !== $(this).closest('table').find(':checked:not(#chkall)').length) {
    $('#chkall').prop('checked', false);
  }
});

Answer 4

为清除check-all框的所有其他复选框添加处理程序。

$(":checkbox:not(#chkall)").change(function() {
    if (!this.checked) {
        $("#chkall").prop("checked", false);
    }
});

Answer 5

尝试向所有复选框添加其他更改事件，例如

$('.yourcheckboxclass').change(function() { });

或

$('#yourtable input:checkbox').change(function() { });

在函数内部，选择你的#chkall并取消选中它。

Answer 6

尝试这样的事情：

$('#chkall').on("change", function() {
  if (!$(this).is(':checked')) {
    $('.selectRow').prop('checked', false);
  } else {
    $('.selectRow').prop('checked', true);
  }
});

  $('.selectRow').each(function( index ){
     $(this).on("change", function(){
     if (!$(this).is(':checked')) {
       $('#chkall').prop('checked', false);
     }
     });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" id="chkall" >Check All</input>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <input type="checkbox" class="selectRow" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="selectRow" />
        </td>
      </tr>
    </tbody>

  </table>

取消选中“全部选中”复选框

6 个答案: