如果所有的sbu复选框为真，设置主复选框为真

我有一个表有两种类型的行（主行和子行）。主行的行ID是“mainRow”+ prId（tr的属性）。子行的行号是“subRow”+ prId（tr的属性）+ rowNo。如果所有的sbu复选框为真，设置主复选框为真

我必须做的是，如果所有子行的复选框都被选中，那么主行的复选框必须被选中。有人可以帮我吗。

<tr id="mainRow2" prId = "2"><td><input type="checkbox" id="main0" ></td></tr> 
    <tr id="subRow2_1" prId = "2"><td><input type="checkbox" id="subRow2_1_1" ></td></tr> 
    <tr id="subRow2_2" prId = "2"><td><input type="checkbox" id="subRow2_2_1" ></td></tr> 
    <tr id="subRow2_3" prId = "2"><td><input type="checkbox" id="subRow2_3_1" ></td></tr> 

<tr id="mainRow5" prId = "5"><td><input type="checkbox" id="main1" ></td></tr> 
    <tr id="subRow5_1" prId = "5"><td><input type="checkbox" id="subRow5_1_1" ></td></tr> 
    <tr id="subRow5_2" prId = "5"><td><input type="checkbox" id="subRow5_2_1" ></td></tr> 
    <tr id="subRow5_3" prId = "5"><td><input type="checkbox" id="subRow5_3_1" ></td></tr> 
    <tr id="subRow5_4" prId = "5"><td><input type="checkbox" id="subRow5_4_1" ></td></tr>

来源

2013-08-29 Abhinav Parashar

我通过使用tbody元素将每个组列在一个单独的表部分启动。然后在每个tbody或表上放置一个点击监听器。如果它从复选框中获得点击，它会查看相关表格部分中的输入，并且如果检查了所有子目录，则检查该集合的主复选框。否则，它将取消选中主复选框。如果用户选中主复选框，则可能需要检查所有子复选框。 – RobG

将下面的jQuery代码添加到您的页面（确保您在页面中包含jQuery脚本）。

虽然您的复选框组织错了，您应该重新组织表。

$('input').change(function() { 

    $("tr[id^='mainRow']").each(function(i,v){ 
    var id = $(v).attr('id'); 
    id = id.split('mainRow')[1]; 
    var subs = $("input[id^='subRow"+id+"']"); 
    var checkedSubs = $("input[id^='subRow"+id+"']:checked"); 
    console.log(checkedSubs.length); 

    if(subs.length == checkedSubs.length) 
     $('input',v).attr('checked',true); 
    else 
     $('input',v).attr('checked',false); 
    }); 

});

Live example here.

来源

2013-08-29 05:10:01

如果所有的sbu复选框为真，设置主复选框为真

回答

相关问题