关于input checkbox 选中问题

Question

想实现的是选中系统设置后，下面的子项都选中。

js是这样写的：点击label，跟label对应的checkbox选中,然后通过样式让label打上勾

变成这样：

现在是选中了，但是对应的子项的勾没选中，反之则选中，请高手帮我看下这是什么原因，谢谢！

html:

<div class="st-checkbox mb20">

                    <input type="checkbox" id="10000">
                    <label for="10000" class="fw700 privlist-grandparent">
                        系统设置
                    </label>
                </div>
                <dl>
                <dt>
                    <div class="st-checkbox">
                        <input type="checkbox" id="10100">
                        <label for="10100" class="text-orange">
                            公司管理
                        </label>
                    </div>
                </dt>
                <dd>
                    
                    <div class="st-checkbox st-checkbox-inline">
                        <input type="checkbox" id="10101">
                        <label for="10101">
                            添加
                        </label>
                    </div>
                    
                    <div class="st-checkbox st-checkbox-inline">
                        <input type="checkbox" id="10102">
                        <label for="10102">
                            编辑
                        </label>
                    </div>
                    
                </dd>
            </dl>

js:
$('body').on('click','.privlist-grandparent',function(){

    console.log($(this).siblings().prop("checked")); //返回false
    if($(this).siblings().prop("checked")) {
        $(this).parent().siblings().find('input[type="checkbox"]').prop('checked',true);
    } else {
        $(this).parent().siblings().find('input[type="checkbox"]').prop('checked',false);
    }

})

Answer 1

子项是指公司管理 添加 编辑这些？？

Answer 2

$('body').on('click','.privlist-grandparent',function(){
    var $this = $(this);
    var flag = $this.prev().prop('checked');
    console.log(falg); //返回false
    $this.parent().siblings().find('input[type="checkbox"]').prop('checked',flag);
})

Answer 3

你提供的html布局不全，只是看到部分而已

Answer 4

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();