Question

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

Answer 1

它应该像

一样简单

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'))
    });
})

演示：Fiddle

Answer 2

您需要稍微更改标记。尝试使用for属性，该属性将自动将文本与相应的文本绑定。确保它包含要将其绑定到的复选框的ID。这就是您的标记应如下所示:(请注意添加label for属性）

<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/

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

2 个答案: