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>

如果选中Child 1或Child 2，我希望检查Parent 2中的输入并设置为inactive。我已经开始研究了它，但却陷入了困境：

$(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，这是invalid。
您没有任何名为'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，则不需要parent（），因此请使用类。

$(".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属性，则必须确保它在文档中具有唯一值。

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

4 个答案: