Question

can someone help me with some traversing and some logic here please. the logic is this:

if any checkbox in column3 is checked then check the first column checkbox.
if none in column 3 is selected, uncheck checkbox in column1

如果第1栏的检查箱没有检查,那么第3栏中的所有检查箱就没有检查。

<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/“rel=“nofollow”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栏的所有物项进行核对。

Try this:

$("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);
});

友情链接