javascript - 当他们的任何一个 child 被取消选择时如何取消选中所有复选框

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 ">
	<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>

Answer 1

实际上您没有针对您的问题进行任何编码(也就是说，当您取消选中任何复选框而不是全选时，取消选中全选)。

像下面这样:-

$(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>

工作 fiddle :- http://jsfiddle.net/am6rgdw1/