文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当任何一个孩子被取消选举时，如何取消选中所有复选框

问当任何一个孩子被取消选举时，如何取消选中所有复选框
EN

Stack Overflow用户
提问于 2017-11-01 05:55:39
回答 3查看 1.4K关注 0票数 3

当取消选中任何一个子复选框时，我如何取消选中所有的checkbox(parent)！

从代码片段中选择所有复选框时，当我们从他们的用户中取消选中时，应取消选中所有复选框(因为没有选中所有复选框)

​

代码语言：javascript
复制
$(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.?
});
代码语言：javascript
复制
<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>

​

javascript
html
checkbox
checkboxlist
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-01 06:01:13

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

如下所示：-

​

代码语言：javascript
复制
$(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);
      }
    }
  });
});
代码语言：javascript
复制
<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/

票数 3
EN

Stack Overflow用户

发布于 2017-11-01 06:18:26

将以下代码添加到js中：

代码语言：javascript
复制
$('input[name="pages[]"]').click(function(){
  $('input[name="pages[]"]').each(function() { 
    var checked = $(this).attr('checked');
    if(!checked){
      $('#Admin').attr('checked', false);
      return false;
    }
  });
});
票数 2
EN

Stack Overflow用户

发布于 2017-11-01 10:15:41

对于Dynamic选项卡id，我确实如下所示：

这是我的html和php：

代码语言：javascript
复制
<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>

这是我的剧本：

代码语言：javascript
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47049039

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档