使用 JQuery 检查父列表项中的复选框？答案

【问题标题】：Use JQuery to check a checkbox in a parent list-item?使用 JQuery 检查父列表项中的复选框？
【发布时间】：2011-06-03 18:42:40
【问题描述】：

我是 Javascript 和 JQuery 的新手，所以我一直在阅读它，并尝试在选中其中一个子项时检查（并设置为非活动）父列表项中的复选框。

如果这没有任何意义，请查看列表结构。

<ul>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 1</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 2
        <ul>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 1</li>
            <li><input type="checkbox" name="items[]" value="21312341" id="21312341" /> Child 2</li>
        </ul>
    </li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 3</li>
    <li><input type="checkbox" name="items[]" value="88712003" id="88712003"  /> Parent 4</li>
</ul>

如果选中 Child 1 或 Child 2，我希望检查 Parent 2 中的输入并将其设置为非活动状态。我已经开始研究它，但被困在这里：

$(function(){
    $('.child').click(function() {
        $(this).parent().parent().parent().toggle();
    });
});

如你所见，我没走多远。任何帮助将不胜感激。

谢谢！

【问题讨论】：

请注意，有一个名为indeterminate 的方便但非标准的复选框属性可能适合您在这种情况下设置。所有主流浏览器都支持它。这是在 jQuery 中设置它的示例。 jsfiddle.net/L2uDL

标签： jquery list input checkbox

【解决方案1】：

根据您发布的标记，这将起作用：

$('ul > li ul li > :checkbox').change(function() {
    $(this).parents('li:last')
           .children("input")
           .attr("disabled", this.checked);
});

另请注意：

您有数字和重复的 ID，是invalid。
您没有任何名为“child”的类在您的文档中。
.toggle“显示或隐藏匹配的元素”。它确实不切换他们的“禁用”属性。

在这里试试：http://jsfiddle.net/karim79/QfTfr/

【讨论】：

【解决方案2】：

试试这个：

<script type="text/javascript">
$(function(){
    $('li ul input[type=checkbox]').click(function() {
                var that = $(this);
                var parentUL = that.parent().parent();
        var parentChk = parentUL.parent().find("input:first");
                var oneChecked = false;
                parentUL.find("input").each(function(){oneChecked = oneChecked || this.checked;});
                console.log(oneChecked);
                parentChk.attr("checked", oneChecked);
    });
});
</script>

【讨论】：

【解决方案3】：

.parent() 方法只返回当前选择器的直接父 DOM 元素。 .parents() 方法将向上搜索 DOM 树以查找与选择匹配的任何父元素。所以 $(".bar").parents(".foo") 将选择所有具有类 "foo" 的父元素以及类 "bar" 的任何元素。

首先给你的目标父元素一个可识别的属性，一个类或者一个id。如果您正在处理 ID，则不需要 parents()，因此请使用类。

$(".child").click(function(){
  $(this).parents('.parentclass').toggle();
});

【讨论】：

【解决方案4】：

查看fillde

$("input:checkbox + ul input:checkbox").click(function(){
    var $ul = $(this).closest("ul");
    var $parent = $ul.prev("input:checkbox");
    if($ul.find("input:checkbox:checked").length > 0){
        $parent.attr("checked", "checked");
    }else{
        $parent.attr("checked", "");
    }
})

如果您对元素使用id 属性，则必须确保它在文档中具有唯一值。

【讨论】：