javascript Jquery检查嵌套ul li中的父复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24892315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Check parent checkboxes in nested ul li
提问by Pierce McGeough
I have a script that will check and uncheck all children checkboxes in a nested list. I am now trying to get it so I can check a low level checkbox and it will check all the parents only back up to the highest level. Here is a JSFiddle
我有一个脚本可以检查和取消选中嵌套列表中的所有子复选框。我现在正在尝试获取它，以便我可以选中一个低级别的复选框，它会检查所有父级仅备份到最高级别。这是一个 JSFiddle
<ul class="tree" id="tree">
<li><input type="checkbox" name="account_settings" value="yes">Account Settings <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="one">AS One</li>
<li><input type="checkbox" name="two" value="two">AS Two</li>
<li><input type="checkbox" name="user_roles" value="user_roles">Users & Roles <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="user_role" value="add">Add</li>
<li><input type="checkbox" name="user_role" value="delete">Delete</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="rl_module" value="yes">RL Module</li>
<li><input type="checkbox" name="rl_module" value="yes">Accounting
<ul>
<li><input type="checkbox" name="vat" value="yes">VAT</li>
<li><input type="checkbox" name="bank_account" value="yes">Banking
<ul>
<li><input type="checkbox" name="view" value="yes">View</li>
<li><input type="checkbox" name="crud" value="yes">CRUD</li>
</ul>
</li>
</ul>
</li>
</ul>
And the corresponding javascript:
以及相应的javascript：
$('input[type=checkbox]').click(function(){
// if is checked
if($(this).is(':checked')){
// check all children
$(this).parent().find('li input[type=checkbox]').prop('checked', true);
// check all parents
$(this).parent().prev().prop('checked', true);
} else {
// uncheck all children
$(this).parent().find('li input[type=checkbox]').prop('checked', false);
}
});
回答by ?????
It looks like you want something like this
看起来你想要这样的东西
$('input[type=checkbox]').click(function(){
if(this.checked){ // if checked - check all parent checkboxes
$(this).parents('li').children('input[type=checkbox]').prop('checked',true);
}
// children checkboxes depend on current checkbox
$(this).parent().find('input[type=checkbox]').prop('checked',this.checked);
});
If you want to check up and down hierarchy - you can do it like this
如果你想检查上下层次 - 你可以这样做
$('input[type=checkbox]').click(function(){
// children checkboxes depend on current checkbox
$(this).next().find('input[type=checkbox]').prop('checked',this.checked);
// go up the hierarchy - and check/uncheck depending on number of children checked/unchecked
$(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
return $(this).next().find(':checked').length;
});
});
回答by j08691
This should do it:
这应该这样做：
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});
Latest update handles up and down the hierarchy, and siblings.
最新更新处理上下层次结构和兄弟姐妹。
回答by Lochemage
Just use jquery.parents(). It is somewhat similar to find() except it searches all parents. Something like this might be close to what you are looking for:
只需使用jquery.parents(). 它与 find() 有点相似，只是它搜索所有父级。像这样的东西可能与您要寻找的很接近：
$(this).parents('li').each(function() {
$(this).children('input').prop('checked', true);
});
See http://api.jquery.com/parents/for more information.
有关更多信息，请参阅http://api.jquery.com/parents/。
EDIT: Alright, here is a solution that works:
编辑：好的，这是一个有效的解决方案：
EDIT2: And a more streamlined solution here:
EDIT2：这里有一个更简化的解决方案：
回答by deckeresq
Have a JSFiddle: http://jsfiddle.net/3y3Pb/16/
有一个 JSFiddle：http: //jsfiddle.net/3y3Pb/16/
I would recommend adding a parent attribute to the checkboxes. This parent attribute will reference the parent checkbox's id so that you don't have to worry about your structure changing:
我建议在复选框中添加父属性。此父属性将引用父复选框的 id，这样您就不必担心结构更改：
$('input type=[checkbox]').change(function () {
$('#' + $(this).attr('parent')).prop('checked', this.checked);
});
Ex:
前任：
<input type="checkbox" name="account_settings" value="yes" id="as">Account Settings
<ul>
<li><input type="checkbox" name="one" value="one" parent="as" id="one">AS One</li>
回答by Evgeny Gil
You can use prevAll()also
I have the same issue. In my case there are multiple checkboxes in li with labels, and each checkbox above target have class parent(generated in js)
你也可以使用prevAll()我有同样的问题。在我的例子中，li 中有多个带有标签的复选框，目标上方的每个复选框都有类parent（在 js 中生成）
$(this).parents().prevAll('input:checkbox.parent').each(function () {
$(this).attr('checked', true);
});
