使用Jquery检查/取消选中父/子复选框 [英] Check/Uncheck Parent/Child Checkboxes using Jquery

问题描述

我真的不熟悉jquery或javascript，我需要一个快速解决我的问题，这就是为什么im发布在这里。下面是一个示例HTML代码段：

 < ul> 
< li>< input type =checkbox/>管理
< ul> 
< li>< input type =checkbox/> President 
< ul> 
< li>< input type =checkbox/>管理员1 
< ul> 
< li>< input type =checkbox/>助理经理1< / li> 
< li>< input type =checkbox/>助理经理2< / li> 
< li>< input type =checkbox/>助理经理3< / li> 
< / ul> 
< / li> 
< li>< input type =checkbox/>管理员2< / li> 
< li>< input type =checkbox/>管理员3< / li> 
< / ul> 
< / li> 
< li>< input type =checkbox/>副总裁
< ul> 
< li>< input type =checkbox/>管理员4< / li> 
< li>< input type =checkbox/>管理员5< / li& 
< li>< input type =checkbox/>管理员6< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

我想做的是检查管理时检查一切。如果我不支持总统，那么，他的父母也应该与他的孩子一起离开，只有副总统和他的孩子被检查。
同样，如果我检查经理1，那么他的孩子也应该检查。但是如果我取消选中助理经理1，那么经理1也应该取消选中，只留下Asst。已选中经理2和3。

请注意，此列表是动态的。

解决方案

请参阅： DEMO

  $（'li：checkbox'）。on（'click'，function（）{
 var $ chk = $（this），
 $ li = $ chk.closest（'li'），
 $ ul，$ parent; 
 if（$ li.has（'ul'））{
 $ li.find（'：checkbox' ）.not（this）.prop（'checked'，this.checked）
} 
 do {
 $ ul = $ li.parent（）; 
 $ parent = $ ul.siblings（'：checkbox'）; 
 if（$ chk.is（'：checked'））{
 $ parent.prop（'checked'，$ ul.has（'：checkbox： not（：checked）'）。length == 0）
} else {
 $ parent.prop（'checked'，false）
} 
 $ chk = 
 $ li = $ chk.closest（'li'）; 
} while（$ ul.is（'：not（.someclass）'））; 
}）; 
  

礼貌：如果一个子项未选中，取消选中父复选框

I am not really that familiar with jquery or javascript and I need a quick solution to my problem that is why im posting it here. Below is a sample html snippet:

<ul>
<li><input type="checkbox" />Administration
    <ul>
        <li><input type="checkbox" />President
            <ul>
                <li><input type="checkbox" />Manager 1
                    <ul>
                        <li><input type="checkbox" />Assistant Manager 1</li>
                        <li><input type="checkbox" />Assistant Manager 2</li>
                        <li><input type="checkbox" />Assistant Manager 3</li>
                    </ul>
                </li>
                <li><input type="checkbox" />Manager 2</li>
                <li><input type="checkbox" />Manager 3</li>
            </ul>
        </li>
        <li><input type="checkbox" />Vice President
            <ul>
                <li><input type="checkbox" />Manager 4</li>
                <li><input type="checkbox" />Manager 5</li>
                <li><input type="checkbox" />Manager 6</li>
            </ul>
        </li>
    </ul>
</li>
</ul>

What I would like to do is to check everything when Administration is checked. If I uncheck President, then, his parent/s should be unchecked also together with his children leaving only the Vice President and his children checked. Similarly, if I check Manager 1 then his children should be checked also. But if I uncheck Assistant Manager 1 then Manager 1 should also be unchecked leaving only Asst. Manager 2 and 3 checked.

Take note that this list is dynamic. Meaning a child can have more children and so on.

Thanks in advance!

解决方案

See this: DEMO

$('li :checkbox').on('click', function () {
    var $chk = $(this),
        $li = $chk.closest('li'),
        $ul, $parent;
    if ($li.has('ul')) {
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }
    do {
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if ($chk.is(':checked')) {
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while ($ul.is(':not(.someclass)'));
});

Courtesy: Uncheck parent checkbox if one child is unchecked

这篇关于使用Jquery检查/取消选中父/子复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！