使用jQuery选中所有复选框

Question

我需要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用户点击它之外,如何获取所有复选框？
任何帮助将不胜感激.

Answer 1

一个更完整的示例应该适用于您的情况:

$('#select_all').change(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    checkboxes.prop('checked', $(this).is(':checked'));
});

#select_all单击复选框时,将选中复选框的状态,并将当前表单中的所有复选框设置为相同的状态.

请注意,您不需要#select_all从选择中排除复选框,因为它将与所有其他复选框具有相同的状态.如果由于某种原因确实需要排除#select_all,可以使用:

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

Answer 2

简单干净

$('#select_all').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});

Answer 3

由于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);
        }
    });
});

Answer 4

$("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>