使用 JQuery 选中父列表项中的复选框？

Question

我对 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>

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

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

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

谢谢！

Answer 1

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

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

另请注意：

• 您有数字 ID 和重复 ID，
  这是无效。
• 您没有任何名为“child”的课程
  在你的文档中。
• .toggle“显示或隐藏匹配的元素”。它不会切换它们的“禁用”属性。

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

Answer 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>

Answer 3

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

首先为您的目标父元素提供一个可识别的属性，可以是类，也可以是 id。如果你正在处理 ID，你就不需要parents()，所以使用一个类。

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

Answer 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 属性，您必须确保它在文档中具有唯一的值。