Jquery检查嵌套ul li中的父复选框

我有一个脚本，它将检查并取消选中嵌套列表中的所有子复选框。 我现在正试图得到它所以我可以检查一个低级复选框，它将检查所有父母只回到最高级别。 这是一个JSFiddle

 
Account Settings  
 
AS One
 
AS Two
 
Users & Roles  
 
Add
 
Delete
  
 
 
 
 
RL Module
 
Accounting 
 
VAT
 
Banking 
 
View
 
CRUD
 
 
 
 
  

和相应的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); } }); 

Answer 1

看起来你想要这样的东西

 $('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); }); 

小提琴

如果你想检查上下层次结构 – 你可以这样做

 $('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; }); }); 

小提琴

Answer 2

这应该这样做：

 $('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); }); 

jsFiddle示例

最新更新处理层次结构和兄弟姐妹的上下。

Answer 3

只需使用jquery.parents() 。 它有点类似于find（），除了它搜索所有父母。 这样的事情可能接近你想要的东西：

 $(this).parents('li').each(function() { $(this).children('input').prop('checked', true); }); 

有关更多信息，请访问http://api.jquery.com/parents/ 。

编辑：好的，这是一个有效的解决方案：

http://jsfiddle.net/3y3Pb/12/

EDIT2：这里有一个更简化的解决方案：

http://jsfiddle.net/3y3Pb/14/

Answer 4

有一个JSFiddle： http ： //jsfiddle.net/3y3Pb/16/

我建议在复选框中添加父属性。 此父属性将引用父复选框的id，以便您不必担心结构更改：

 $('input type=[checkbox]').change(function () { $('#' + $(this).attr('parent')).prop('checked', this.checked); }); 

例如：

 Account Settings 
 
AS One 

Answer 5

你可以使用prevAll()我也有同样的问题。 在我的情况下，li中有多个带有标签的复选框，目标上方的每个复选框都有class parent （在js中生成）

 $(this).parents().prevAll('input:checkbox.parent').each(function () { $(this).attr('checked', true); });