如何使用jQuery选择所有复选框？

小编典典

如何使用jQuery选择所有复选框？

javascript

我需要有关jQuery选择器的帮助。假设我有一个标记，如下所示：

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>

除了#select_all用户单击时，如何获取所有复选框？

阅读 318

2020-05-01

共1个答案

小编典典

一个更完整的示例适用于您的情况：

$('#select_all').change(function() {

  var checkboxes = $(this).closest('form').find(':checkbox');

  checkboxes.prop('checked', $(this).is(':checked'));

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>

当#select_all被点击复选框，该复选框的状态进行检查，并在当前形式的所有复选框被设置为相同的状态。

请注意，您无需#select_all从选择中排除该复选框，因为该复选框的状态将与其他所有复选框相同。如果出于某些原因确实需要排除#select_all，则可以使用以下方法：

$('#select_all').change(function() {

  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));

  checkboxes.prop('checked', $(this).is(':checked'));

});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>

  <table>

    <tr>

      <td><input type="checkbox" id="select_all" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

    <tr>

      <td><input type="checkbox" name="select[]" /></td>

    </tr>

  </table>

</form>

2020-05-01