Jquery检查嵌套ul里的父复选框 [英] Jquery Check parent checkboxes in nested ul li

问题描述

我有一个脚本可以检查和取消选中嵌套列表中的所有子项复选框。我现在正试图获得它，以便我可以检查低级别复选框，并且它会检查所有父母只回到最高级别。 这是一个JSFiddle

 < ul class =treeid =tree> 
 
< li>< input type =checkboxname =account_settingsvalue =yes>帐户设置<！ - 应该在此处检查 - > 
< ul> 
< li>< input type =checkboxname =onevalue =one> AS One< / li> 
< li>< input type =checkboxname =twovalue =two> AS Two< / li> 
< li>< input type =checkboxname =user_rolesvalue =user_roles>使用者& amp; amp;角色<！ - 应该在这里检查 - > 
< ul> 
< li>< input type =checkboxname =user_rolevalue =add>添加< / li> 
< li>< input type =checkboxname =user_rolevalue =delete>删除< / li> <！ - 在此处查看 - > 
< / ul> 
< / li> 
< / ul> 
< / li> 
 
< li>< input type =checkboxname =rl_modulevalue =yes> RL Module< / li> 
 
< li>< input type =checkboxname =rl_modulevalue =yes>会计
< ul> 
< li>< input type =checkboxname =vatvalue =yes>增值税< / li> 
< li>< input type =checkboxname =bank_accountvalue =yes> Banking 
< ul> 
< li>< input type =checkboxname =viewvalue =yes>查看< / li> 
< li>< input type =checkboxname =crudvalue =yes> CRUD< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
 
< / ul> 
  

以及相应的javascript：

<$ p $点击（函数（）{

//如果被选中
if（$（this））。 （'：checked'））{

//检查所有的孩子
$（this）.parent（）。find（'li input [type = checkbox]'）。prop 'checked'，true）;

//检查所有父母
$（this）.parent（）。prev（）。prop（'checked'，true）;

} else {

//取消所有的孩子
$（this）.parent（）。find（'li input [type = checkbox]'）。prop（'checked '，false）;

}

}）;

解决方案

看起来你想要这样的东西

  $（'input [type = checkbox]'）。click（function（）{
 if（this.checked）{ //检查所有父级复选框
 $（this）.parents（'li'）。children（'input [type = checkbox]'）。prop（'checked'，true）; 
 } 
 //复选框取决于当前复选框
 $（this）.parent（）。find（'input [type = checkbox]'）。prop（'checked'，this.checked）; 
}）; 
  

FIDDLE

如果你想检查层次结构 - 你可以这样做

  $（'input [type = checkbox]'）。click（function（）{
 // children复选框取决于当前复选框$ b $（$ this）.next（）。find（'input [type = checkbox]'）。prop（'checked'，this.checked）; 
 //沿着层次结构 - 检查/取消检查（''''''''''）。''''''''''''''$'$'$'$' $（this）.next（）。find（'：checked'）。length; 
}）; 
}）; 
  

FIDDLE

I have a script that will check and uncheck all children checkboxes in a nested list. I am now trying to get it so I can check a low level checkbox and it will check all the parents only back up to the highest level. Here is a JSFiddle

<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>

And the corresponding javascript:

$('input[type=checkbox]').click(function(){

    // if is checked
    if($(this).is(':checked')){

        // check all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', true);

        // check all parents
        $(this).parent().prev().prop('checked', true);

    } else {

        // uncheck all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', false);

    }

});

解决方案

It looks like you want something like this

$('input[type=checkbox]').click(function(){
    if(this.checked){ // if checked - check all parent checkboxes
        $(this).parents('li').children('input[type=checkbox]').prop('checked',true);
    }
    // children checkboxes depend on current checkbox
    $(this).parent().find('input[type=checkbox]').prop('checked',this.checked); 
});

FIDDLE

If you want to check up and down hierarchy - you can do it like this

$('input[type=checkbox]').click(function(){
    // children checkboxes depend on current checkbox
    $(this).next().find('input[type=checkbox]').prop('checked',this.checked);
    // go up the hierarchy - and check/uncheck depending on number of children checked/unchecked
    $(this).parents('ul').prev('input[type=checkbox]').prop('checked',function(){
        return $(this).next().find(':checked').length;
    });
});

FIDDLE

这篇关于Jquery检查嵌套ul里的父复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！