jqueryを使用して親の親のチェックボックスをオンまたはオフにする

Question

アカウント設定チェックボックスをオンにすると、すべての子の入力タグが完全にチェックされます。しかし子供のチェックを外した場合とを削除するを削除すると、アカウント設定のチェックが外されます。

私は2つの AS一つ AS とがチェックされているときアカウント設定をオフにしたくありません。

これを解決する方法を教えてください。 Jsfiidle

ここ

は、以下の私のコードです。

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> 

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); 
}); 

Answer 1

はあなたが唯一のhtmlタグを使用する必要があり、この

<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); 
}