jquery - 选中/取消选中所有复选框

Question

如何选中/取消选中复选框 onclick td 。请提出一些想法

Answer 1

您需要稍微更改一下标记。尝试使用for自动将文本与相应文本绑定的属性。确保它包含要绑定到的复选框的 ID。这就是你的标记应该是这样的：（注意添加labelwithfor属性）

<table border="1">
    <thead>
        <tr>
            <th id="chkall_head">
                <input type="checkbox" id="chkall" name="chkall" />
            </th>
            <th>
                <label for="chkall">Check all</label> 
                <!-- ^^ check this line - chkall is the id the check box ^^-->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="chk1" name="chk1" />
            </td>
            <td>
                <label for="chk1">Checkbox 1</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk2" name="chk2" />
            </td>
            <td>
                <label for="chk2">Checkbox 2</label>
            </td>
        </tr>
    </tbody>
</table>

接下来，尝试使用change而不是click. 由于您使用了该for属性，因此您不需要为标题写入单独的单击事件。这是JS：

$("#chkall").change(function () {
    $("tbody").find("input[type=checkbox]").prop("checked", this.checked);
});

演示：http: //jsfiddle.net/hungerpain/FBv8B/

更正了 Arun 回答评论中的小提琴演示：http: //jsfiddle.net/hungerpain/FBv8B/2/

Answer 2

它应该很简单

jQuery(function($){
    var chkbox = $('#chkall'), chks = $(':checkbox').not(chkbox);
    $('#chkall_head').click(function(event){
        if(!$(event.target).is(chkbox)){
            chkbox.prop('checked', !chkbox.is(':checked'))
        }
        chks.prop('checked', chkbox.is(':checked'))
    });
})

演示：小提琴