Javascript 使用jquery选中或取消选中父项复选框

当我选中帐户设置复选框时，所有子li输入标记都被完美选中。但是，当我取消选中“添加”和“删除”复选框时，也会取消选中“帐户设置”

当选中“作为一个”和“作为两个”时，我不想取消选中“帐户设置”

帮我解决这个问题

这里

下面是我的代码

HTML

<ul class="tree" id="tree">
    <li>
        <input type="checkbox" name="account_settings" value="yes">Account Settings
        <!-- AND SHOULD CHECK HERE -->
        <ul>
            <li>
                <input type="checkbox" name="one" value="one">AS One</li>
            <li>
                <input type="checkbox" name="two" value="two">AS Two</li>
            <li>
                <input type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles
                <!-- SHOULD CHECK HERE -->
                <ul>
                    <li>
                        <input type="checkbox" name="user_role" value="add">Add</li>
                    <li>
                        <input type="checkbox" name="user_role" value="delete">Delete</li>
                    <!-- CHECK HERE -->
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="rl_module" value="yes">RL Module</li>
    <li>
        <input type="checkbox" name="rl_module" value="yes">Accounting
        <ul>
            <li>
                <input type="checkbox" name="vat" value="yes">VAT</li>
            <li>
                <input type="checkbox" name="bank_account" value="yes">Banking
                <ul>
                    <li>
                        <input type="checkbox" name="view" value="yes">View</li>
                    <li>
                        <input type="checkbox" name="crud" value="yes">CRUD</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

帐户设置


作为一个整体

两岁

用户及；角色


加

删除





RL模块

会计


大桶

银行业务


看法

积垢

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


$('input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
           if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});

$（'input[type=checkbox]'）。单击（函数（）{
$（this.parent（）.find（'li input[type=checkbox]）.prop（'checked'，$（this.is（':checked'））；
var-sibs=false；
$（this）.最近（'ul'）。子项（'li'）。每个（函数（）{
如果（$（'input[type=checkbox]'，this）.is（'：checked'））sibs=true；
})
$（this.parents（'ul'）.prev（）.prop（'checked'，sibs）；
});

试试这个

<ul class="tree" id="tree">
    <li>
        <input type="checkbox" name="account_settings" value="yes">Account Settings
        <ul>
            <li>
                <input class="account_settings" type="checkbox" name="one" value="one">AS One
            </li>
            <li>
                <input class="account_settings" type="checkbox" name="two" value="two">AS Two
            </li>
            <li>
                <input class="account_settings" type="checkbox" name="user_roles" value="user_roles">Users &amp; Roles
                <ul>
                    <li>
                        <input class="account_settings user_roles" type="checkbox" name="user_role" value="add">Add
                    </li>
                    <li>
                        <input class="account_settings user_roles" type="checkbox" name="user_role" value="delete">Delete
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

$('input[type=checkbox]').click(function () {
    if($(this).prop('checked'))
    {
        $('.'+$(this).attr('name')).prop('checked',true);
    }
    else
    {
        $('.'+$(this).attr('name')).prop('checked',false);
    }
    findparent(this);
});
});

function findparent(elem)
{
    var flag = 1;
    var fcount = 0;
    var count = 0;
    $(elem).parent().parent().find('li input').each( function ( index ) {
        fcount = fcount +1;
        if($(this).prop('checked') == false)
            count = count + 1;
    });

    if(count == fcount)
        flag = 0;

    if(flag == 0)
        $(elem).parent().parent().prev().prop('checked',false);
    else
        $(elem).parent().parent().prev().prop('checked',true);
}

帐户设置


作为一个整体


两岁


用户及；角色


添加


删除






$（'input[type=checkbox]'）。单击（函数（）{
if（$（this.prop（'checked'））
{
$（'.+$（this.attr（'name'））.prop（'checked'，true）；
}
其他的
{
$（'.+$（this.attr（'name'））.prop（'checked'，false）；
}
findparent（本）；
});
});
函数findparent（elem）
{
var标志=1；
var fcount=0；
var计数=0；
$（elem）.parent（）.parent（）.find（'li input'）.each（函数（索引）{
fcount=fcount+1；
if（$（this）.prop（'checked'）==false）
计数=计数+1；
});
如果（计数=fcount）
flag=0；
如果（标志==0）
$（elem）.parent（）.parent（）.prev（）.prop（'checked'，false）；
其他的
$（elem）.parent（）.parent（）.prev（）.prop（'checked'，true）；
}

您只能使用html标记。请使用它的id或名称来区分复选框。是的，它应该在我这边动态。所以我用tagsI更新了我的答案。请看。它很好：）它很好用。当我取消选中“添加和删除用户”时，角色仍处于选中状态。如何取消选中父用户和角色请再次检查代码。我已经更新了。添加了另一个用于选中父复选框和同级复选框的函数。完美。但在我的例子中，它应该重复嵌套复选框多次。检查此url后，请检查您的url。我的意思是，将当前复选框的name属性值作为子复选框的类名。这适用于所有复选框。对不起，我没有；我不明白你的意思。你能用JSFIDLE给我看看吗？