0

我有这个带有标签和复选框的数据表。

当前设置为同时单击主行复选框。该表还具有每个主行的子行，我需要将行为添加到相同标签也同时单击的子行。例如：当我检查主行A的第一个子行时，那么主行B的第一个子行也会被检查。

我目前正在使用的表的结构与 ID 和类的结构相同。

我正在尝试的摘要：单击子行的复选框时，下面的相同子行复选框也被选中。

我是否将子行添加到数组中，并在单击复选框时以某种方式扫描它们以识别匹配项？有人可以为我指出如何解决这个问题的正确方向吗？谢谢。

http://jsfiddle.net/c7EcH/

$(document).ready(function() {
    $("label:contains('PRIMARY ROW A')").closest('tr').attr('id', 'prime-row-a');
    $("label:contains('PRIMARY ROW B')").closest('tr').attr('id', 'prime-row-b');
    var primeRowA = $("label:contains('PRIMARY ROW A')").prev('input');
    var primeRowB = $("label:contains('PRIMARY ROW B')").prev('input');

    primeRowA.change(function(){
        primeRowB.attr('checked', $(this).is(':checked'));
    });
    primeRowB.change(function(){
        primeRowA.attr('checked', $(this).is(':checked'));
    });
});  

<table width="550" border="0" cellspacing="0" cellpadding="5">
 <tr>
   <td>
     <input type="checkbox">
     <label><span>PRIMARY ROW A</span></label></td>
 </tr>
 <tr>
   <td>
     <input type="checkbox">
     <label><span id="01">01 - SUB ROW A</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span id="03">03 - SUB ROW C</span></label></td>
   </tr>
 <tr>
   <td>
    <input type="checkbox">
    <label><span>PRIMARY ROW B</span></label></td>
 </tr>
 <tr>
  <td>
    <input type="checkbox">
    <label><span id="01">01 - SUB ROW A</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="02">02 - SUB ROW B</span></label></td>
 </tr>
 <tr>
  <td>
   <input type="checkbox">
   <label><span id="03">03 - SUB ROW C</span></label></td>
 </tr>
</table>
4

2 回答 2

1

首先，ID 应该是唯一的，因此您不应该为多个元素提供相同的 id。

您可以为每组复选框分配相同的类，当您单击一个时，设置具有相同类的所有其他复选框的状态

$(document).ready(function() {
    $('input[type="checkbox"]').change(function () {
        var cls = $(this).attr('class');
        $('.' + cls).attr('checked', $(this).is(':checked'));
    });
});

http://jsfiddle.net/rdmond/PGLjg/

这实际上重新选中了您刚刚选中的框，但调整它以仅更改具有相同类的其他复选框并不难。

于 2012-11-16T17:51:15.500 回答
0

首先使用唯一的名称和 ID - 你可以为你的input字段命名，例如 - 对于第 1 行

<label for="row1">ROW 1</label>
<input name = "row1" type = "checkbox" /> // row1
<input name = "subrow1a" type = "checkbox" /> // sub row of row1
// you can also use arrays of name i.e. like `name = subrow1[]`

对于第 2 行

<label for="row2">ROW 2</label>
<input name = "row2" type = "checkbox" /> // row 2
<input name = "subrow2a" type = "checkbox" /> // sub row of row2

其次..您还可以在检查时调用 Jquery/JavaScript 函数，即onclick()执行所需的操作。

于 2012-11-16T17:51:44.133 回答