0

我有一个表有两种类型的行（主行和子行）。主行的行 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>
4

1 回答 1

0

Add the following jQuery code to your page (make sure you include the jQuery script on your page).

Although your organization of checkboxes is wrong and you should work on reorganizing the table.

$('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-29T05:10:01.967 回答