Question

第一次按“全选”时，所有复选框都会突出显示。但是当再次按下时，它们不会被移除。问题是什么？链接：https://jsfiddle.net/erLqk2v9/2/
JQuery代码：

$(document).ready(function() {
    $(".select-all").click(function() {
        var checkboxes = $("form input[type=checkbox]");
        if($(this).is(":checked")) {
            checkboxes.prop("checked", false);
        } else {
            checkboxes.prop("checked", true);
        }
    });
});

Answer 1

使用!$("#all-val").is(":checked")

解决了这个问题

你可以查看下面的工作小提琴链接。

https://jsfiddle.net/erLqk2v9/3/

希望它适合你!!!

Answer 2

问题是您正在检查:checked .select-all元素上的span。我进行了更改，以便检查第一个复选框，即第一个<input type="checkbox" value="All" id="all-val">元素

更新了小提琴：https://jsfiddle.net/erLqk2v9/4/

Answer 3

你应该反过来做出if陈述。

为了更好的可用性，我还添加了一种方法，因此如果用户选中所有复选框，则＆＃34;全选＆＃34;还检查：

＆＃13;

$(".select-all").change(function() {

  // If "Select All" are selected, check all checkboxes
  if ($(this).is(":checked")) {
    $("input[type=checkbox]").prop("checked", true);
  }

  // If "Select All" are not selected, uncheck all checkboxes
  else {
    $("input[type=checkbox]").prop("checked", false);
  }
});

// If all is checked, check "Select All"
$("form input[type=checkbox]").change(function() {
  // If all checkboxes are selected check, "Select All"
  if ($('form input[type=checkbox]:checked').length == $('form input[type=checkbox]').length) {
    $('.select-all').prop('checked', true);
  }

  // If all checkboxes are not selected, uncheck "Select All"
  else {
    $(".select-all").prop("checked", false);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="select-all" id="checkAll">
<label for="checkAll">Check All</label>
<form>
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</form>

＆＃13;

输入复选框在第二次单击时不起作用

3 个答案: