Question

我有这个嵌套的列表结构。我的树可以到达n级。

我想要一个JQuery的选择器，如果检查了子节点，它只能选择父节点。

<ul id="treeFeatureList">
<li>
    <input type="checkbox" name="selectedRole">
    Application Manager
    <ul>
        <li>
            <input type="checkbox" name="selectedRole">
            Application Manager Panel
        </li>
        <li>
            <input type="checkbox" name="selectedRole">
            Client Role
            <ul>
                <li>
                    <input type="checkbox" name="selectedRole">
                    Client Task 1
                </li>
                <li>
                    <input type="checkbox" name="selectedRole">
                    Client Task 2
                </li>
            </ul>
        </li>
    </ul>
</li>
</ul>

我想要的是什么：如果选中了客户端Task1或Task2，则也会检查客户端角色和应用程序管理器。绝对不是应用程序管理器面板（应保持未选中状态）。

感谢帮助制作这个神奇的选择器。

Answer 1

.closest()和.siblings()的组合应该能满足您的需求。您将要选中已选中输入的最近祖先，该输入是“父”复选框的兄弟，然后遍历该复选框。代码看起来像这样：

$('input:checkbox').change(function() {
    //if you are using < jQuery 1.6, use .attr() instead of .prop()
    if (this.checked) {
        $(this).closest('ul').siblings('input:checkbox').prop('checked', true);
    }
});

Here is a live demo ->

Answer 2

$('input[type="checkbox"]').change(function() {
    if ($(this).is(':checked')) {
        $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
    }
    else
    {
        $(this).parents('ul').siblings('input:checkbox').attr('checked', false);
    }
});

Here是一个演示。

Answer 3

$('input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
    $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
} else {
        //if any of the sibling is checked, do not  uncheck the main category
        var isSiblingChecked = false;
        $(this).parent().siblings().each(function() {
            if (($(this).find('input[type="checkbox"]').is(':checked'))) {
                isSiblingChecked = true;
            }
        });     
        if (isSiblingChecked == false) {            
    $(this).parents('ul').siblings('input:checkbox').attr('checked', false);
        }
}
});

检查JQuery中的所有直接父复选框

3 个答案: