Question

我有一个像这样的DOM结构（我不想因为过度拥挤而显示其他td）：

<table>
<tr><td><input type="checkbox" name="checkbox1" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox2" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox3" class="rowSelectCheckbox"></td></input></tr>
<tr><td><input type="checkbox" name="checkbox4" class="rowSelectCheckbox"></td></input></tr>

</table>

<input type="checkbox" name="checkbox_select" id="lastCheckbox"></input>

我要做的是设置最后一个带有lastCheckbox id的复选框，以检查是否选中任何其他复选框（任何ID为checkbox1的复选框，复选框2等），如果全部其他复选框未选中，则将此最后一个复选框设置为取消选中。

Answer 1

有一点小问题：结束</input>标记属于</td>标记之前。

否则它非常简单。

$(".rowSelectCheckbox").click(function(){
    var lastCheckbox = $("#lastCheckbox");
    if $(".rowSelectCheckbox:checked").length) {
        lastCheckbox.attr("checked", "checked");
    } else {
        lastCheckbox.removeAttr("checked");
    }
});

Answer 2

试试这个：

$('.rowSelectCheckbox').change( function() {
    $('.rowSelectCheckbox').each( function() {
        if ($(this).prop('checked')) {
            $('#lastCheckbox').prop('checked', true);
            return false;
        }

        $('#lastCheckbox').prop('checked', false);
    } );
} );

小提琴：http://jsfiddle.net/B78vP/

Answer 3

你应该这样做：

$('.rowSelectCheckbox').change( function() {
    flag = false;
    $('.rowSelectCheckbox').each( function() {
        if ($(this).is(':checked')) {
            flag = true;
        }
    });    
    $('#lastCheckbox').prop('checked', flag);
});

现场演示：http://jsfiddle.net/nayish/teXHe/

Answer 4

快速if-test应该这样做：

$("input.rowSelectCheckbox").change(function(){
    if ( $("input.rowSelectCheckbox:checked") ) { //include "rowSelectCheckbox" so id=lastCheckbox doesn't trip the test
        $("input#lastCheckbox").attr("checked");
    }
    else
        $("input#lastCheckbox").removeAttr("checked");
    }
});

一个循环，例如.each（），是不必要的，因为你只关心是否检查了（任何）一个 input.rowSelectCheckbox。这将在第一次遇到被检查的<input class="rowSelectCheckbox" />时返回true;）

Answer 5

以下jQuery应该做的伎俩

$(document).ready(function() {
    $(".rowSelectCheckbox").click(function() {
        var numChecked = $(".rowSelectCheckbox").filter(":checked").length;

        if(numChecked > 0)
        {
            $("#lastCheckbox").prop("checked", "checked");
        }
        else
        {
            $("#lastCheckbox").prop("checked", false);
        }
    });
});

当点击其中任何一个时，这将计算已选中复选框的数量，如果此数字大于0，请检查表格外的最后一个复选框。

有一个有效的例子here。

需要帮助jquery复选框设置

5 个答案: