javascript - 取消选中子项之一时取消选择所有复选框的问题

Question

我正在尝试使用 jquery 使用下面的代码检查所有复选框，该代码在切换全选检查和取消选中 slectAll 时工作正常

现在，如果用户取消选中其中一个ieldset 复选框，我想取消选中slectAll。我尝试了这段代码

    $.each($("input[name='numbers']:not(:checked)"), function () {
        $('input:checkbox[name=slectAll]').prop("checked", false);
    });

但它没有完成任务!

<input id="boxid" type="checkbox" name="slectAll">
<label for="boxid">Select All</label>
<fieldset id="group_1">
    <input type="checkbox" name="numbers[]" value="0" />
    <input type="checkbox" name="numbers[]" value="1" />
    <input type="checkbox" name="numbers[]" value="2" />
    <input type="checkbox" name="numbers[]" value="3" />
    <input type="checkbox" name="numbers[]" value="4" />
</fieldset>

jquery 文件是

$(function () {
    $('input:checkbox[name=slectAll]').change(function () {
        if ($(this).is(':checked')) {
            $('#group_1').find(':checkbox').prop("checked", true);
        } else {
            $('#group_1').find(':checkbox').prop("checked", false);
        }
    });

    $.each($("input[name='numbers']:not(:checked)"), function () {
        $('input:checkbox[name=slectAll]').prop("checked", false);
    });

});

你能告诉我如何解决这个问题吗？谢谢

Answer 1

您还需要为这些复选框设置一个更改处理程序

$(function() {
  var $all = $('input:checkbox[name=slectAll]').change(function() {
    $checks.prop("checked", this.checked);
  });

  var $checks = $('#group_1 :checkbox').change(function() {
    $all.prop("checked", $checks.not(':checked').length == 0);
  });

  $('button').click(function() {
    var array = $checks.filter(':checked').map(function() {
      return this.value
    }).get();
    alert(array);


    return;
    //demo of ajax request
    $.ajax({
      url: '',
      data: {
        myvalues: array,
        usrename: somevalue
      }
    })
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="boxid" type="checkbox" name="slectAll">
<label for="boxid">Select All</label>
<fieldset id="group_1">
  <input type="checkbox" name="numbers[]" value="0" />
  <input type="checkbox" name="numbers[]" value="1" />
  <input type="checkbox" name="numbers[]" value="2" />
  <input type="checkbox" name="numbers[]" value="3" />
  <input type="checkbox" name="numbers[]" value="4" />
</fieldset>

<button>Test</button>