jquery - 如何通过选中/取消选中一个复选框来选中和取消选中 html 表中的所有复选框？

Question

我有一个表，有行，每一行都有一个复选框，在thead. 我的代码：

<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb1"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb2"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb3"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

（也可以在这里尝试）

谁能帮助我，如果我选中顶部的主复选框，所有复选框都将被选中，如果我取消选中主复选框，则所有复选框都将被取消选中。如果你能帮助我，谢谢！

Answer 1

工作演示http://jsfiddle.net/xYAfj/2/

$('#allcb').change(function(){
    if($(this).prop('checked')){
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', true);
        });
    }else{
        $('tbody tr td input[type="checkbox"]').each(function(){
            $(this).prop('checked', false);
        });
    }
});

更短的代码

工作演示http://jsfiddle.net/cse_tushar/4tss8/

$('#allcb').change(function () {
    $('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

Answer 2

$(function(){
       $("#allcb").click(function() {
       var chkBoxes = $("input[id^=cb]");
       chkBoxes.prop("checked", !chkBoxes.prop("checked"));
   }); 
});

http://jsfiddle.net/7f7Kz/2/

Answer 3

我通过将表格主体中复选框的名称从cb n更改为cb[]（更适合服务器操作），对您的 HTML 代码进行了一些修改。我还考虑到可以通过单击另一个复选框来更改主复选框状态的事实：如果用户手动选择所有其他复选框，则主复选框应该反映它；此外，如果用户在单击主复选框以选中所有其他复选框后取消选中某一行，则主复选框应该被取消选中。

你可以看到它在那里工作：https ://jsfiddle.net/h6tgj02p/

<table border="1">
    <thead>
        <tr>
            <th><input type="checkbox" id="allcb" name="allcb"/></th>
            <th>values</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="cb1" name="cb[]"/></td>
            <td>value1</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb2" name="cb[]"/></td>
            <td>value2</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="cb3" name="cb[]"/></td>
            <td>value3</td>
        </tr>
    </tbody>
</table>

<script  type="text/javascript">
$(document).ready(function() {

    /*
    * Click on select all checkbox
    */
    $('#allcb').click(function(e) {
        $('[name="cb[]"]').prop('checked', this.checked);
    });

    /*
    * Click on another checkbox can affect the select all checkbox
    */
    $('[name="cb[]"]').click(function(e) {
        if ($('[name="cb[]"]:checked').length == $('[name="cb[]"]').length || !this.checked)
            $('#allcb').prop('checked', this.checked);
    });

});

</script>