Question

我的桌子看起来像这样：

<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行）：如果我选择 Sub Child 1 或 Sub Child 2 ，则代码应自动选择 Child 2 AND Parent 1

-JSFiddle Here http://jsfiddle.net/YDgHN/2/

任何帮助都会很棒。感谢

Answer 1

对于问题＃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);

});

请参阅，当您选择孩子时，父母也将被选中，反之亦然。

Answer 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;
                    }
                });
            }
        });

JQuery：具有3级自动选择子级或父级的复选框

2 个答案: