用jQuery检查父复选框 [英] Check the parent checkbox with jQuery

问题描述

基本上我想写一个js func，如果我检查一个子复选框，父复选框也会检查，如果还没有检查。

 < ul id =ulParentstyle =margin：0; padding： 0; list-style：none;> 
< li style =margin：0 0 5px 0;> 
< input type =checkboxchecked =checkedclass =liParentid =p1/> Parent1 
< ul id =ulParentstyle =margin：0; padding：0; list-style：none;> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c1onclick =checkParent（this）; /> Child1 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c2onclick =checkParent（this）;/> Child2 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c3onclick =checkParent（this）;/> Child3 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c4onclick =checkParent（this）;/> Child4 
< / li> 
< / ul> 
< / li> 
 
< li style =margin：0 0 5px 0;> 
< input type =checkboxchecked =checkedclass =liParentid =p2/> Parent2 
< ul id =ulParentstyle =margin：0; padding：0; list-style：none;> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c1onclick =checkParent（this）; /> Child1 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c2onclick =checkParent（this）;/> Child2 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c3onclick =checkParent（this）;/> Child3 
< / li> 
< li> 
< input type =checkboxchecked =checkedclass =liChildid =c4onclick =checkParent（this）;/> Child4 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

JS Func

  function checkParent（child）{
 
 if（child！= null）{
 
 //如果孩子被选中，我们需要检查父类别
 if（child.checked）{
 //获取父复选框，并检查它是否检查....需要帮助在这里.... 
 $（child）.parent（）。parent （）.parent（）...... 
 
} 
} 
} 
  

解决方案

我将删除HTML中的内联javascript，并使用jQuery绑定来绑定检查事件：

  $（document）.ready（function（）{
 $（'input.liChild'）。change（function（）{
 if $（this）.is（'：checked'））{
 $（this）.closest（'ul'）。siblings（'input：checkbox'）。attr（'checked'，true）; 
} 
}）; 
}）; 
  

这会将您正在查找的事件与类liChild的任何输入绑定，而不会自动onclicks。

Basically I am trying to write a js func that if I check a child checkbox the parent checkbox also checks, if not already checked. I am using jquery here is my html:

      <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>

            <li style="margin: 0 0 5px 0;">
                <input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2
                <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;">
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3
                    </li>
                    <li>
                        <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4
                    </li>
                </ul>
            </li>
</ul>

JS Func

function checkParent(child){

if (child != null) {

    // if child is checked we need to check the parent category       
    if (child.checked) {
    // get the parent checkbox and check it if not check....need help here....
           $(child).parent().parent().parent()......

       }
    }
 }

解决方案

I'd remove the inline javascript in your HTML and use jQuery binding to bind the check event:

$(document).ready(function() {
    $('input.liChild').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
        }
    });
});

This will bind the event you're looking for to any input with the class liChild automatically without all those onclicks.

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