JQuery：具有3级自动选择子级或父级的复选框 [英] JQuery: Checkbox with 3 level auto select child or parent
本文介绍了JQuery：具有3级自动选择子级或父级的复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表格如下：
< table border =1>
< tr>
< td> Parent< / td>
< td>儿童< / td>
< / tr>
< tr>
< td>< input type =checkboxlevel =parentname =someparent1value =1> Parent 1< / td>
< td>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename1value1>儿童1
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename2value2>儿童2< / li>
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename1value =3>子子级1< / li>
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename2value =3>子子级2< / li>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename3value3>儿童3< / li>
< / td>
< / tr>
< tr>
< td>< input type =checkboxlevel =parentname =someparent1value =1> Parent 2< / td>
< td>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename1value1>儿童1
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename1value =3>子子级1< / li>
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename2value =3>子子级2< / li>
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename3value =3>子子3< / li>
< li style =list-style-type：none;& nbsp;& nbsp;& nbsp;& nbsp;< input type =checkboxlevel =subchild name =somename4value =3>子子级4< / li>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename2value2>儿童2< / li>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename3value3>儿童3< / li>
< / td>
< / tr>
< tr>
< td>< input type =checkboxlevel =parentname =someparent1value =1> Parent 3< / td>
< td>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename1value1>儿童1
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename2value2>儿童2< / li>
< li style =list-style-type：none;>< input type =checkboxlevel =childname =somename3value3>儿童3< / li>
< li style =list-style-type：none;>& nbsp;& nbsp;& nbsp;& nbsp;其他原因：< input type =textlevel = subchildsize =50name =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]' ，true）;
}
}）;
$（'input [@ type = checkbox] [level $ =subchild]'。）click（function（event）{
var checked = $（this）.is '：checked'）;
if（checked）{
$（'input [@ type = checkbox] [level $ =child]' true）;
$（'input [@ type = checkbox] [level $ =parent]'）。attr（'checked'，true）;
}
}
1）当单击子复选框时，如何只检查父复选框的当前行？ >
2）当单击子子项复选框时，如何仅检查父复选框的当前行+子复选框？
当前问题是当您选中1个子字符时，它将选中所有复选框。
- 示例（父1行）：
如果选择子子项1 或子子项2 代码应自动选择子项2 和父项1
-JSFiddle这里： http://jsfiddle.net/YDgHN/2/
任何帮助将是巨大的。感谢
解决方案
第一期：
$（'input [@ type = checkbox] [level =child]'）click（function（event）{
var checked = $（this）.is（'：checked' ;
if（checked）{
$（this）.closest（'td'）。parent（）。children（'td'）。 type = checkbox] [level =parent]'attr（'checked'，true）;
}
}
第二期：
$ $（'input [@ type = checkbox] [level =subchild]'）click（function（event）{
var checked = $（this）.is（' check（'）;
if（checked）{
//两个选择父元素
$（this）.closest（'td'）。parent td'）。first（'td'）。children（'input [@ type = checkbox] [level =parent]'）attr（'checked'，true）;
两个选择Child元素，你必须遍历所有的li元素//找到合适的子元素
$（this）.parent（）。prevAll（'li'）。 （）{
var found = $（this）.children（'input [@ type = checkbox]'）。attr（'level'）=='child';
if b $ b $（this）.children（'input [@ type = checkbox] [level =child]'）attr（'checked'，true）;
return false;
}
}）;
}
}）;
I have a table that look like this:
<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;"> <input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
<li style="list-style-type:none;"> <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;"> <input type="checkbox" level="subchild" name="somename1" value="3">Sub Child 1</li>
<li style="list-style-type:none;"> <input type="checkbox" level="subchild" name="somename2" value="3">Sub Child 2</li>
<li style="list-style-type:none;"> <input type="checkbox" level="subchild" name="somename3" value="3">Sub Child 3</li>
<li style="list-style-type:none;"> <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;"> Others Reason: <input type="text" level="subchild" size="50" name="other" ></li>
</td>
</tr>
</table>
And jquery code like this:
$('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) How do i check only current row of parent checkbox when child checkbox is clicked?
2) How do i check only current row of parent checkbox + child checkbox when sub child checkbox is clicked?
-Current issue is when you check 1 subchild it will select all the checkbox there.
-Example (Parent 1 row): If i select either Sub Child 1 or Sub Child 2 the code should be auto select Child 2 AND Parent 1
-JSFiddle Here: http://jsfiddle.net/YDgHN/2/
Any help would be great. Thanks
解决方案
For Issue One:
$('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);
}
});
For Issue Two:
$('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级自动选择子级或父级的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
