Question

我想自动取消选中或检查儿童的复选框：

HTML：

<ul>
    <li>1 <input type='checkbox' /></li>
    <ul>
        <li>1.1 <input type='checkbox'' /></li>
    </ul>
    <ul>
        <li>1.1.1 <input type='checkbox' /></li>
    </ul>
</ul>

使用Javascript：

$('li input').change(function(){
    if($(this).is(":checked")){
        $(this).parent().next().children("li").children("input").attr("checked", true);
        console.log("checked")
    }else{
        $(this).parent().next().children("li").children("input").attr("checked", false);
        console.log("not checked")
    }
})

但它只适用于第一次出现。我不明白为什么因为1.1更改和事件更改未被触发

http://jsfiddle.net/D8ZdU/

由于

Answer 1

您可以使用最接近的方法：

$('ul input').change(function(){
   var $this = $(this).closest('ul');
   $this.add($this.nextAll()).find("input").prop("checked", this.checked);
})

http://jsfiddle.net/LpGsS/

请注意，您的标记需要修改为什么不使用li元素？

<ul>
    <li>1 <input type='checkbox' /></li>
    <li>1.1<input type='checkbox' /></li>
    <li>1.1.1 <input type='checkbox' /></li>
</ul>

$('ul input').change(function(){
    $(this).parent().nextAll().find("input").prop("checked", this.checked);
})

http://jsfiddle.net/JjvKH/

Answer 2

如果您更正了HTML，请执行以下操作：

<ul>
    <li>1 <input type="checkbox" />
        <ul>
            <li>1.1 <input type="checkbox" />
                <ul>
                    <li>1.1.1 <input type="checkbox" /></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

然后以下jQuery工作：

$('input:checkbox').change(
    function(){
        var state = this.checked ? true : false;
        $(this).next('ul').find('input:checkbox').prop('checked', state);
    });

JS Fiddle demo

HTML存在的问题是ul元素不是另一个ul或ol元素的有效子元素。 ul（和ol）的唯一有效子项是li元素，其他所有内容无效，除非它包含在li中。

参考文献：

Answer 3

对于第一个复选框，“parent”是外部<li>中的<ul>。对于其他人来说，他们的“父母”是<li>，它在另一个<ul>中被隔离，并且没有“下一个”。

选中列表中的复选框

3 个答案: