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

IT技术 javascript jquery css checkbox css-selectors
2021-01-22 23:41:27

我需要有关 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用户单击它,否则如何获取所有复选框

6个回答

一个更完整的例子应该适用于你的情况:

$('#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>

jQuery 文档指出$( "[type=checkbox]" )现代浏览器的速度更快(比 快$(':checkbox'))。
2021-03-24 23:41:27
对我来说,这只在第一次起作用(即,选中所有,取消选中所有)。在第二次“全选”时,没有其他复选框被选中。我使用了checkboxes.prop('checked', true);checkboxes.prop('checked', false);而不是从这个答案oop,刚刚意识到这在页面下方的答案中提到了......
2021-03-29 23:41:27

简单干净:

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked', c);
});
<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>

微妙 - 将检索到的复选框的选中状态设置为与我们最近修改的“主”复选框的选中状态相同 - 简单、优雅且令人惊讶地合乎逻辑 - 谢谢!
2021-03-19 23:41:27
这也可以这样做......$(':checkbox').prop('checked', this.checked);
2021-03-22 23:41:27

由于 attr() 方法,最佳答案在 Jquery 1.9+ 中不起作用。使用 prop() 代替:

$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});
OP 修改了答案以应对“最近”的变化:)
2021-03-28 23:41:27
谢谢你,我在 JQuery 1.8.3 中使用了你的实现;-)
2021-04-12 23:41:27
$("form input[type='checkbox']").attr( "checked" , true );

或者你可以使用

:复选框选择器

$("form input:checkbox").attr( "checked" , true );

我已经重写了你的 HTML 并为主复选框提供了一个点击处理程序

$(function(){
    $("#select_all").click( function() {
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>
实际上,正确的语法是.attr("checked", "checked").
2021-03-22 23:41:27
+1 感谢 rahul,但是当用户单击 #select_all 复选框时,我需要找到所有复选框。
2021-03-29 23:41:27
请注意不要检查页面上的每个复选框...... :)
2021-04-07 23:41:27
 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });