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>

Answer 2

您可以将复选框的总数与已选中的数字进行比较，并根据需要翻转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>

在取消选中Child之一时取消选中所有复选框的问题

2 个答案: