0

我有一个看起来像这样的表：

<table border="1">

 <tr>
   <td>Parent</td>
   <td>Child</td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 1</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 2</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename3" value="3">Sub Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" level="subchild" name="somename4" value="3">Sub Child 4</li>   
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>    
   </td>
 </tr>
 <tr>
   <td><input type="checkbox" level="parent" name="someparent1" value="1">Parent 3</td>
   <td>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename1" value"1"> Child 1</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename2" value"2"> Child 2</li>
     <li style="list-style-type:none;"><input type="checkbox" level="child"  name="somename3" value"3"> Child 3</li>
     <li style="list-style-type:none;">&nbsp;&nbsp;&nbsp;&nbsp;Others Reason: <input type="text" level="subchild" size="50" name="other" ></li>      
   </td>
 </tr>   

</table>

和这样的jquery代码：

$('input[@type=checkbox][level$="child"]').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('input[@type=checkbox][level$="parent"]').attr('checked', true);
    }
});

$('input[@type=checkbox][level$="subchild"]').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('input[@type=checkbox][level$="child"]').attr('checked', true);        
        $('input[@type=checkbox][level$="parent"]').attr('checked', true);        
    }
});

1）单击子复选框时，如何仅检查父复选框的当前行？

2）单击子复选框时，如何仅检查父复选框+子复选框的当前行？

- 当前问题是当您检查 1 个子子项时，它将选择那里的所有复选框。

- 示例（父 1 行）：如果我选择子子 1或子子 2，则代码应自动选择子 2和父 1

-JSFiddle 这里：http: //jsfiddle.net/YDgHN/2/

任何帮助都会很棒。谢谢

4

2 回答 2

2

对于问题 #1 ，您可以尝试以下操作：

$('input[@type=checkbox][level$="child"]').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $(this).parent().parent().parent('tr').find('td:first input[@type=checkbox][level$="parent"]').attr('checked', true);
    }
});

这是解决问题一的更好代码

$('input[@type=checkbox][level$="child"]').click(function (event) {

    var checked = $(this).is(':checked');
    $(this).parent().parent().parent('tr').find('td:first input[@type=checkbox][level$="parent"]').attr('checked', checked);

});

看，当你选择孩子时，父母也会被选择，反之亦然。

于 2013-04-14T15:31:57.477 回答
2

对于问题一：

$('input[@type=checkbox][level="child"]').click(function (event) {
        var checked = $(this).is(':checked');
        if (checked) {
            $(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);
        }
    });

对于问题二：

    $('input[@type=checkbox][level="subchild"]').click(function (event) {
            var checked = $(this).is(':checked');

            if (checked) {
   // Two select Parent element   
         $(this).closest('td').parent().children('td').first('td').children('input[@type=checkbox][level="parent"]').attr('checked', true);

   // Two select Child element. You will have to loop through all the li elements to //find the appropriate child element 

                $(this).parent().prevAll('li').each(function () {
                    var found = $(this).children('input[@type=checkbox]').attr('level') == 'child';
                    if (found) {
                        $(this).children('input[@type=checkbox][level="child"]').attr('checked', true);
                        return false;
                    }
                });
            }
        });
于 2013-04-14T16:55:26.007 回答