Question

有人可以通过一些遍历和一些逻辑来帮助我。逻辑是这样的：

如果选中column3中的任何复选框，则选中第一列复选框。
如果未选中第3列，请取消选中第1列中的复选框

如果取消选中column1复选框，则取消选中column3中的所有复选框

<table>
    <tr>
       <td><input class="isSelected" type="checkbox" /></td>
       <td>row1col2</td>
       <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td>
    </tr>
    <tr>
        <td><input class="isSelected" type="checkbox" /></td>
        <td>row2col2</td>
        <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td>
    </tr>
    <tr>
        <td><input class="isSelected" type="checkbox" /></td>
        <td>row3col2</td>
        <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td>
    </tr>
</table>

Answer 1

以下是一种方法：http://jsfiddle.net/mblase75/NDh2g/

$('table tr').find('input:checkbox:first').change(function() {
    var $this = $(this);
    $this.closest('tr').find('input:checkbox').prop('checked', $this.prop('checked'));
});

$('table tr').find('input:checkbox:not(":first")').change(function() {
    var tmp = true;
    var $this = $(this);
    $this.closest('tr').find('input:checkbox:not(":first")').each(function() {
        tmp &= $(this).prop('checked');
    });
    $this.closest('tr').find('input:checkbox:first').prop('checked',tmp);
});

Answer 2

我假设你还想取消选中第一个col中的复选框时取消选中第3列中的所有项目。

试试这个：http://jsfiddle.net/MTPFK/1/

$("input.actionItem").change(function() {
    var $t = $(this); 
    var checked = ($t.closest("td").find("input.actionItem:checked").length > 0);
    $t.closest("tr").find("input.isSelected").prop("checked", checked);
});

$("input.isSelected").change(function() {
    var $t = $(this); 
    var status = $t.prop("checked");
    $t.closest("tr").find("input.actionItem").prop("checked", status);   
});

请注意，这会使用类名来区分不同的复选框类型，而不是它们所在的列。

要明确定位列，您可以执行以下操作：http://jsfiddle.net/NvCDp/

$("tr > td:nth-child(3)").find("input.actionItem").change(function() {
    var $t = $(this);
    var checked = $t.prop("checked") ? true : ($t.siblings("input:checked").length > 0);
    $("td:first", $t.closest("tr")).find("input")
            .prop("checked", checked);
});

$("tr > td:first-child").find("input.isSelected").change(function() {
    var $t = $(this);
    var checked = $t.prop("checked");
    $t.closest("tr").find("td:nth-child(3) input.actionItem")
            .prop("checked", checked);
});

如果有任何检查检查，否则取消选中

2 个答案: