使用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>

如果选中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,这些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>