我有一个包含两种行(主行和子行)的表。 主行的行ID是“mainRow”+ prId(tr的属性)。 子行的行id是“subRow”+ prId(tr的属性)+ rowNo。
我要做的是,如果选中子行的所有复选框,则必须选中主行的复选框。有人可以帮助我。
<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>
答案 0 :(得分:0)
将以下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);
});
});