如果所有子复选框都未选中，如何删除选中的复选框？答案

【问题标题】：How to remove checked checkbox if all sub check boxes are unchecked?如果所有子复选框都未选中，如何删除选中的复选框？
【发布时间】：2015-10-07 08:41:10
【问题描述】：

我有一组复选框（Sub1、Sub2、Sub3）和一个主复选框。如果选中任何子复选框，则必须选中主复选框。如果所有子复选框都未选中，则只需取消选中主复选框，如果至少选中一个复选框，则必须选中主复选框。我的代码如下。

<!DOCTYPE html>
<html>
    <script type='text/javascript' src="jquery-1.10.1.js"></script>
    <script type='text/javascript'>
    $(window).load(function() {
        var chk1 = $("input[type='checkbox'][value='1']");

        var chk2 = $("input[type='checkbox'][value='2']");
        var chk3 = $("input[type='checkbox'][value='3']");
        var chk4 = $("input[type='checkbox'][value='4']");

        chk2.on('change', function() {
            chk1.prop('checked', this.checked);
        });

        chk3.on('change', function() {
            chk1.prop('checked', this.checked);
        });

        chk4.on('change', function() {
            chk1.prop('checked', this.checked);
        });
    });
    </script>

    </head>

    <body>

        <input type="checkbox" value="1" class="user_name">Main1
        <br>
        <br>
        <br>

        <input type="checkbox" value="2" id="one" class="user_name">sub-2
        <br>
        <input type="checkbox" value="3" id="one" class="user_name">sub-3
        <br>
        <input type="checkbox" value="4" id="one" class="user_name">sub-4
        <br>
    </body>

</html>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您可以有一个单击处理程序，您可以在其中检查是否检查了任何子项

$(function() {
  var $checks = $("input.user_name:not(.main)"),
    $main = $('input.user_name.main');
  $checks.change(function() {
    $main.prop('checked', $checks.is(':checked'))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="user_name main">Main1
<br>
<br>
<br>

<input type="checkbox" value="2" id="one" class="user_name">sub-2
<br>
<input type="checkbox" value="3" id="one" class="user_name">sub-3
<br>
<input type="checkbox" value="4" id="one" class="user_name">sub-4
<br>

【讨论】：

你好 Tushar，恰当的回答。如果我有另一组带有 (Sub-5,Sub-6,Sub-7) 的 Main2 怎么办。我们需要对另一组复选框进行哪些更改。
@GaneshSudarsan 你需要分享 html 结构
嗨 Arun ，检查任何 Sub1、Sub2、Sub3 复选框后。主要检查。如果我取消选中 Main 复选框，其余子复选框仍处于选中状态。如果我们取消选中主复选框，如何取消选中子复选框你能帮我做什么吗？在这个 [jsfiddle.net/arunpjohny/cpncz12L/2/]
嗨阿伦，通过提交页面如何验证至少一个复选框被选中，如果在所有复选框中选中任何复选框，则表单必须进一步处理，否则不在此链接中:[jsfiddle.net/arunpjohny/cpncz12L/3/]

【解决方案2】：

每当change 事件发生在他们身上时，您都可以使用您常用的user_name 类来实现此目的。试试这个：

$('.user_name').change(function () {
    var $checkbox = $(this);
    var $siblings = $checkbox.siblings('.user_name');

    if ($checkbox.is(':first-child')) {
        $siblings.prop('checked', $checkbox.prop('checked'));
    } else {
        $siblings.first().prop('checked', $siblings.not(':first-child').length == $siblings.filter(':checked').length);
    }
});

Example fiddle

另请注意，您有多个元素具有相同的 id 属性，这是无效的 - id 对于文档中的元素应该是唯一的。

【讨论】：

【解决方案3】：

您需要实现 OR 语句。您可以详尽地执行此操作，也可以在循环中执行此操作。该解决方案属于第一种：

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src="jquery-1.10.1.js"></script>
    <script type='text/javascript'>

      $(window).load(function(){
        var chk1 = $("input[type='checkbox'][value='1']");

        var chk2 = $("input[type='checkbox'][value='2']");
        var chk3 = $("input[type='checkbox'][value='3']");
        var chk4 = $("input[type='checkbox'][value='4']");

        chk2.on('change', function(){
          chk1.prop('checked',(chk2.checked || chk3.checked || chk4.checked) );
        });
        chk3.on('change', function(){
          chk1.prop('checked',(chk2.checked || chk3.checked || chk4.checked) );
        });
        chk4.on('change', function(){
          chk1.prop('checked',(chk2.checked || chk3.checked || chk4.checked) );
        });
      }); 
    </script>
  </head>
...

【讨论】：