0

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

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/

谢谢

4

3 回答 3

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/

于 2012-12-15T14:57:21.643 回答
1

如果您将 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 小提琴演示。

您的 HTML 的问题是一个ul元素不是另一个ul或元素的有效子ol元素。ul(and ol)的唯一有效子元素是li元素，其他所有元素都是无效的，除非它包含在li.

参考：

于 2012-12-15T14:57:31.313 回答
0

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

于 2012-12-15T14:50:03.500 回答