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

問題1を修正するためのより良いコードは次のとおりです

$('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 に答える