Question

我有一组复选框（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>

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

Answer 2

只要发生$("canvas").click(function(event) { var ctx = $(this)[0].getContext("2d"); ctx.clearRect(0, 0, 300, 150); });事件，您就可以使用常用user_name类来实现此目的。试试这个：

change

Example fiddle

另请注意，您有多个具有相同$('.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); } });属性且无效的元素 - id对于包含该文档的元素应该是唯一的。

Answer 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>
...

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

3 个答案: