子供のいずれかが選択解除されたときにすべてのチェックボックスをオフにする方法

Question

子チェックボックスのいずれかが選択解除されているときに、すべて選択checkbox(parent)を選択解除するにはどうすればよいですか？スニペットから

我々は、すべてのチェックボックスを選択して、我々は（すべてのチェックボックスが選択されていないので）自分のすべてのチェックボックスを選択するから、ユーザーがチェックする必要があります選択を解除するとき

$(document).ready(function() { 
 
    $('#Admin').click(function() { 
 
    var checked = $(this).prop('checked'); 
 
    $('#tab-10').find('input:checkbox').prop('checked', checked); 
 
    }); 
 

 
    $('#Sales').click(function() { 
 
    var checked = $(this).prop('checked'); 
 
    $('#tab-20').find('input:checkbox').prop('checked', checked); 
 
    }); 
 
    // i have so may like this in that case how can i do that.? 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#tab-10"> First </a></li> 
 
    <li class=""><a data-toggle="tab" href="#tab-20"> Second </a></li> 
 

 
</ul> 
 

 
<div class="tab-content vehicle"> 
 
    <div id="tab-10" class="tab-pane active"> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label><input type="checkbox" id="Admin"><b>Select All</b></label> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label><input type="checkbox" name="pages[]" value="2">Dealerships</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label><input type="checkbox" name="pages[]" value="23">Users</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label><input type="checkbox" name="pages[]" value="59">Third-Party Exports</label> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
<br><br> 
 

 
<div id="tab-20" class="tab-pane "> 
 
\t <div class="panel-body"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-3"> 
 
\t \t \t \t <div class="checkbox"> 
 
\t \t \t \t \t <label><input type="checkbox" id="Sales"/><b>Select All</b></label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="col-md-3"> 
 
\t \t \t \t <div class="checkbox"> 
 
\t \t \t \t \t <label><input type="checkbox" name="Second[]" value="2">Second tab 1</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-md-3"> 
 
\t \t \t \t <div class="checkbox"> 
 
\t \t \t \t \t <label><input type="checkbox" name="Second[]" value="23">Second tab 1</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
    
 
</div>

Answer 1

実際には、DINあなたの問題に関するコーディングは何もしていません（つまり、select-allではなくチェックボックスをオフにして、select-allをオフにします）。

以下のように実行します -

$(document).ready(function() { 
 
    $('#Admin').click(function() { 
 
    var checked = $(this).prop('checked'); 
 
    $('#tab-10').find('input:checkbox').prop('checked', checked); 
 
    }); 
 
    $('#Sales').click(function() { 
 
    var checked = $(this).prop('checked'); 
 
    $('#tab-20').find('input:checkbox').prop('checked', checked); 
 
    }); 
 

 
    $('.tab-pane').find('input:checkbox:not(:first)').click(function() { 
 
    if (!$(this).is(':checked')) { 
 
     $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false); 
 
    } else { 
 
     var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length; 
 
     var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length; 
 
     if (checkbox_length == checked_check_box_length) { 
 
     $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#tab-10"> First </a></li> 
 
    <li class=""><a data-toggle="tab" href="#tab-20"> Second </a></li> 
 

 
</ul> 
 

 
<div class="tab-content vehicle"> 
 
    <div id="tab-10" class="tab-pane active"> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" id="Admin"><b>Select All</b></label> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" name="pages[]" value="2">Dealerships</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" name="pages[]" value="23">Users</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" name="pages[]" value="59">Third-Party Exports</label> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 

 
    <div id="tab-20" class="tab-pane "> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" id="Sales" /><b>Select All</b></label> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" name="Second[]" value="2">Second tab 1</label> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-md-3"> 
 
      <div class="checkbox"> 
 
      <label> 
 
       <input type="checkbox" name="Second[]" value="23">Second tab 1</label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

の作業フィドル： - http://jsfiddle.net/am6rgdw1/

Answer 2

があなたのjsに以下のコードを追加します。

$('input[name="pages[]"]').click(function(){ 
    $('input[name="pages[]"]').each(function() { 
    var checked = $(this).attr('checked'); 
    if(!checked){ 
     $('#Admin').attr('checked', false); 
     return false; 
    } 
    }); 
}); 

Answer 3

をダイナミックタブのidのために私はこのようにした：

これは私のhtmlとphpのです：

<div class="tab-content vehicle"> 
<?php $active='active'; foreach ($check_menu as $y) {?> 
<div id="tabs-<?=$y?>" class="tab-pane <?=$active?>"> 
<div class="panel-body"> 
<div class="row"> 
    <div class="col-md-3"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" class="SelectAll_Dynamic" id="<?=$y?>" /> 
       <b>Select All</b> 
      </label> 
     </div> 
    </div> 
    <?php foreach($menus as $x): if ($x['parent_id'] ==$y):?> 
    <div class="col-md-3"> 
     <div class="checkbox"> 
      <label> 
       <input type="checkbox" name="pages[]" value="<?=$x['id']?>" 
       <?php if (array_search($x['id'],$my_menu,true)) 
        { 
         echo "checked "; 
        } 
       ?> 
      ><?=$x['name']?></label> 
     </div> 
    </div> 
    <?php endif; $active=""; 
    endforeach;?> 
</div></div> 
</div> 
<?php } ?> 
</div> 

これは私のスクリプトです：

<script> 
    $(document).ready(function() { 
     $('.SelectAll_Dynamic').click(function() { 
      var select_Id = this.id; 
      var checked = $(this).prop('checked'); 
      $('#tabs-'+select_Id).find('input:checkbox').prop('checked', checked); 
      alert(select_Id); 
     }); 

     $('.tab-pane').find('input:checkbox:not(:first)').click(function() { 
      if (!$(this).is(':checked')) { 
       $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', false); 
       } else { 
       var checkbox_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first)').length; 
       var checked_check_box_length = $(this).closest('.tab-pane').find('input:checkbox:not(:first):checked').length; 
       if (checkbox_length == checked_check_box_length) { 
        $(this).closest('.tab-pane').find('input:checkbox:first').prop('checked', true); 
       } 
      } 
     }); 
    }); 

</script>