Javascript Jquery在嵌套ulli中选中父复选框

我有一个脚本，可以选中和取消选中嵌套列表中的所有子项复选框。我现在正试图得到它，这样我就可以选中一个低级别复选框，它将检查所有的家长只备份到最高级别

---

只需使用

jquery.parents（）

。它有点类似于find（），只是它搜索所有的父对象。类似于此的内容可能与您正在寻找的内容非常接近：

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

有关更多信息，请参阅

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

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

这应该可以做到：

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

---

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

看起来您需要这样的东西

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

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

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

拥有一个JSFIDLE：

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

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

例：

帐户设置

作为一个整体

您也可以使用

prevAll（）
我也有同样的问题。在我的例子中，li中有多个带有标签的复选框，目标上方的每个复选框都有class
parent
（在js中生成）

如果我理解正确的话，你想逆转它现在所做的。您希望它在选中子框时选中所有父框。是的，因此它类似于特权设置。如果单击“用户和角色”，则需要父级处于活动状态，而不是兄弟级。是否仍要检查子级，或者是否应删除该功能。应选中/取消选中所有子项。会计也应该被检查。当你取消选中一个孩子的时候，它也应该取消选中它的父母吗？如果是的话，它应该只在最后一个兄弟姐妹被选中时取消选中父代，还是自动取消选中所有兄弟姐妹和父代？基本上，如果在没有检查其子项的情况下检查帐户设置是否可以，或者只有在至少一个子项仍被检查时才应该保持检查状态？是的，我知道。这就是为什么我提到它可能与您要查找的内容“接近”，因为我知道这完全行不通，抱歉。请将其修改为
$（this）.parents（'li'）.children（'input[type=“checkbox”]”）。prop（'checked'，true）
像这样：@Lochemage为什么要使用
.each（）
？我想你不需要，但我通常更喜欢它，因为它使阅读和调试更容易。这个版本没有正确地取消选中子项，它会取消选中所有父项，但不选中子项。现在如果我选中顶级父项，它检查所有的孩子我根据OP最近的变化更新了我的答案，但似乎还有一些附带的情况，我不确定OP会如何处理。现在你引入了一个错误，如果你检查会计，然后取消选中查看和CRUD，它会尴尬地让VAT自己检查。您需要在每个级别上检查同级，直到到达
#tree
为止。在查看每个级别的同级时，您必须这样处理取消选中的父级：这是功能完全正确的最简洁的解决方案。如果我检查用户和角色，然后取消选中它，帐户设置仍处于选中状态。@j08691不应取消选中父项，因为这样它还必须检查兄弟项。“如果你点击用户和角色。所有的子项都应该被检查/取消检查。会计也应该被检查。”注意他怎么没有说会计也应该被检查和取消检查。我认为OP没有完全考虑清楚。我猜他需要一个兄弟姐妹检查。为什么你要孩子取消检查父母，而取消检查父母已经这样做了，其他孩子也这样做了？
<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>

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