取消选择所有复选框时出现问题 Un 选中子项之一

Issue on Deselecting All Checkbox on Un checking one of Child

本文关键字：Un 问题 选择 复选框 取消      更新时间：2023-09-26

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

现在我想取消选中slectAll，以防出现用户取消选中其中一个 ieldset 复选框的情况。我试过这段代码

    $.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);
    });
});

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

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

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

您可以将复选框的总数与选中的数量进行比较，并根据需要翻转slectAll：

$(function () {
    var sAll = $('input:checkbox[name=slectAll]'),
        other = $('#group_1 :checkbox');
    sAll.on('change', function() {
        other.prop('checked', this.checked);
    });
    other.on('change', function() {
        sAll.prop('checked', other.length === other.filter(':checked').length);
    });
});


$(function () {
    var sAll = $('input:checkbox[name=slectAll]'),
        other = $('#group_1 :checkbox');
    sAll.on('change', function() {
        other.prop('checked', this.checked);
    });
    other.on('change', function() {
        sAll.prop('checked', other.length === other.filter(':checked').length);
    });
});
<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>

相关文章：