javascript - 限制每个表行的复选框选择

Question

我尝试使用 JS 将每个表行的选定复选框限制为 3 个。每行都有一个单独的复选框和 5 个级别，只能选择 2 个，如下所示:

<tr>
    <td>
        <input type="checkbox" name="indicator[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
    <td>
        <input type="checkbox" name="graduations[]">
    </td>
</tr>

实际代码如http://www.javascriptkit.com/script/script2/checkboxlimit.shtml所示:

function checkboxlimit(checkgroup, limit){
    var checkgroup=checkgroup
    var limit=limit
    for (var i=0; i<checkgroup.length; i++){
        checkgroup[i].onclick=function(){
        var checkedcount=0
        for (var i=0; i<checkgroup.length;checkedcount+=(checkgroup[i].checked)? 1 : 0
            if (checkedcount>limit){
                alert("You can only select a maximum of "+limit+" checkboxes")
            this.checked=false
            }
        }
    }
}

我只能限制整个表。有没有简单的方法可以做到这一点？

Answer 1

如果您有权访问 jquery，则可以使用 parent().siblings() 将选中的复选框数量限制为每行 2 个

$(function() {
    $('input[name=graduations\\[\\]]').click(function(){
        if($(this).parent().siblings().children("input[name=graduations\\[\\]]:checkbox:checked").length >= 2)
            this.checked = false;
    });
});

http://jsfiddle.net/p2dLu2mu/