如果 table 上未选中 Checkbox，则隐藏按钮

Question

我有一个 table 行的开头带有复选框。我有一个隐藏的按钮。如果我选中一个复选框，该按钮就会显示。如果我取消选中它，按钮会隐藏。它工作正常。我的问题是，如果我拥有所有复选框 "checked" 并取消选中那些已选中复选框中的一个复选框，则该按钮会隐藏。它不应该隐藏，因为仍然有复选框被选中。我该如何解决这个问题？

这是我的代码

脚本：

$('table').on('change', ':checkbox', function(){
    if (!this.checked) 
    {
        $('#delete').hide();
    }

    else
    {
        $('#delete').show();
    }


});

Html:

<table class="table table-hover table-condensed" style = "font-size: 13px;">
                <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', function() {
  $('#delete').toggle(!!$('input:checkbox:checked').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display: none" id="delete">delete</div>
<table class="table table-hover table-condensed" style="font-size: 13px;">
  <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>

如果 table 上未选中 Checkbox，则隐藏按钮

Hide a button if non of Checkbox is checked on a table

html

javascript

checkbox

jquery