Jquery 勾选父项输入[复选框]时，如何选择ul列表子项的所有输入？

当选中父输入[checkbox]时，我想检查列表的所有子输入

<dd id="space_content">
<ul>
    <li parent-id="0" li-id="16"><input type="checkbox" value="16"/>Anthropology Department 
    <ul>
        <li parent-id="16" li-id="18"><input type="checkbox" value="18"/>Anthropology Faculty Collections
        </li>
        <li parent-id="16" li-id="23"><input type="checkbox" value="23"/>Shared Collections</li>
    </ul>
</li>
    <li parent-id="0" li-id="45"><input type="checkbox" value="45"/>Center for asdf on Vermont</li>
<li parent-id="0" li-id="19"><input type="checkbox" value="19"/>Center for Research on Vermont
    <ul>
        <li parent-id="19" li-id="24"><input type="checkbox" value="24"/>Collections for Testing
            <ul>
               <li parent-id="24" li-id="25"><input type="checkbox" value="25"/>Geology Department
                </li> 
            </ul>
        </li>
    </ul>
</li>
</ul>
</dd>

您可以使用

next（）

获取下一个

ul

并在其中查找

复选框

，并将当前复选框状态分配给它们。由于您有复选框，因此最好选择它们，而不是指定

输入。也可以使用更改事件而不是单击


$(function(){    
    $("#space_content > ul > li :checkbox").change(function(){    
      $(this).next('ul').find(':checkbox').prop('checked', this.checked);
    }); 
});

试一试

演示：
我想这就是您想要的。我有示例代码供您使用

   $(".pc-box").click(function() {
        if (this.checked) {
            $(this).closest("li").find(".cc-box").prop("checked", true);
            $(this).parent().fadeOut();
        }  
    });

演示：-

如果你通过一个
Jquery
你可以做到这一点
为此，您需要添加
jquerylib

$(function () {
    $("#space_content > ul input").click(function () {

        $(this).next('ul').find('input').prop('checked', this.checked);

    });
});

下面是一个示例
您应该使用
.change（）
事件而不是
。对于输入元素，单击（）
，以及使用
.prop（）
而不是
.attr（）
来设置复选框的选中状态。您可以将代码缩短为：

$(function(){    
    $("#space_content > ul > li > input").change(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});


$(function(){    
    $("#space_content > ul > li :checkbox").change(function(){    
      $(this).next('ul').find(':checkbox').prop('checked', this.checked);
    }); 
});


如果您在旧浏览器（如IE8）中遇到
.change（）
事件问题，可以使用
。单击（）
：

$(function(){    
    $("#space_content > ul > li > input").click(function(){    
        $(this).next().find('input').prop('checked', this.checked);
    }); 
});

试试这个


这将选中所有子
复选框
和取消选中
试试这个

$(function(){    
    $("#space_content > ul > li > input").click(function(){
      $(this).siblings().find(':checkbox').attr('checked', this.checked);
    }); 
});

你能发一把小提琴吗？请不要再反对了。直到IE8中的复选框失去焦点，change（）才会触发。click（）是最适合复选框的。JSFIDLE在ie8模式下甚至不适用于我。但我知道一个事实，在单击IE8中的复选框后，只有单击其他地方，change（）才会启动。上周我对此有意见。如果它对你有效，这是一个例外，而不是一个规则，你的信息将导致某人出现问题。如果你有很好的理由使用“更改”而不是单击复选框，我很乐意听到。@Bryan好的，我已经添加了你的建议。我不是故意刁难你，只是我有一个问题花了一段时间才弄清楚。不想让其他人经历同样的问题。感谢您将其包括在内。当单击节点
集合进行测试时，这不起作用
感谢@Usman，这是由于绑定事件的选择器造成的，请立即检查。
$(function(){    
    $("#space_content > ul > li > input").click(function(){

       if($(this).is(':checked')){
           $(this).next('ul').find(':checkbox').prop('checked', this.checked);


        }
        else
        {
             $(this).next('ul').find(':checkbox').prop('checked', '');
        }
    }); 
});

$(function(){    
    $("#space_content > ul > li > input").click(function(){
      $(this).siblings().find(':checkbox').attr('checked', this.checked);
    }); 
});