Question

<div class="col-lg-3 col-xs-3 col-left">
            <h4>Topics</h4>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="1" checked> mCRC
                </label>
            </div>
            <div class="checkbox ml10">
                <label>
                    <input type="checkbox" value="2" data-parent="1" id="stivarga-efficacy" checked> STIVARGA Efficacy
                </label>
            </div>
            <div class="checkbox ml20">
                <label>
                    <input type="checkbox" value="3" data-parent="1,2" id="long-term" checked> Long-Term Responders
                </label>
            </div>
            <div class="checkbox ml20">
                <label>
                    <input type="checkbox" value="4" data-parent="1,2" id="stivarga-in-clinical" checked> STIVARGA in Clinical Practice
                </label>
            </div>
            <div class="checkbox ml10">
                <label>
                    <input type="checkbox" value="5" data-parent="1" checked> STIVARGA AE Management
                </label>
            </div>
            <div class="checkbox ml10">
                <label>
                    <input type="checkbox" value="6" data-parent="1" checked> Dosing
                </label>
            </div>
            <div class="checkbox ml10">
                <label>
                    <input type="checkbox" value="7" data-parent="1" checked> Patient Communication
                </label>
            </div>
            <div class="checkbox ml10">
                <label>
                    <input type="checkbox" value="8" data-parent="1" checked> Case Studies
                </label>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" value="9" checked> GIST
                </label>
            </div>

        </div>

页面上有一些复选框。我需要：

检查所有孩子是否已选中父母。
如果未选中所有子项，请取消选中父级。
如果至少检查了一个孩子，请检查父母。

我怎样才能做到这一点？我在这里找到了一个解决方案Parent and child checkboxes 它，我有一个大孩子功能的问题

codepen http://codepen.io/Assert/pen/mAbVAE

Answer 1

＆＃13;

$('#treeList :checkbox').change(function (){
    $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
    if (this.checked) {
        $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
    } else {
        $(this).parentsUntil('#treeList', 'ul').each(function(){
            var $this = $(this);
            var childSelected = $this.find(':checkbox:checked').length;
            if (!childSelected) {
                $this.prev(':checkbox').prop('checked', false);
            }
        });
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="treeList">
   <li>
   <input type="checkbox" name="selectedRole">
   Application Manager
    <ul>
       <li>
           <input type="checkbox" name="selectedRole">
           Application Manager Panel
       </li>
       <li>
            <input type="checkbox" name="selectedRole">
            Client Role
             <ul>
               <li>
                   <input type="checkbox" name="selectedRole">
                   Client Task 1
                </li>
                <li>
                   <input type="checkbox" name="selectedRole">
                    Client Task 2
                </li>
                   
                 </ul>
              </li>
         
          <li>
            <input type="checkbox" name="selectedRole">
            Client Role
             <ul>
               <li>
                   <input type="checkbox" name="selectedRole">
                   Client Task 1
                </li>
                <li>
                   <input type="checkbox" name="selectedRole">
                    Client Task 2
                </li>
                   
             
           </ul>
       </li>

</ul>

＆＃13;

Example 1 :

Referance Site :

父子孙子复选框

1 个答案: