Question

＆＃13;

    function toggle(source) {
      checkboxes = document.getElementsByName('options[]');
      for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
      }
    }

＆＃13;

<form class="unsubscribe_form" action="process.php" method="post">
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
  <label for="checkbox-1-1"></label>Option 1
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
  <label for="checkbox-1-2"></label>Option 2
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
  <label for="checkbox-1-3"></label>Option 3
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
  <label for="checkbox-1-4"></label>Option 4
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
  <label for="checkbox-1-5"></label>Option 5
  <input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
  <label for="checkbox-1-6"></label>All
  <br>
  <input type="submit" name="formSubmit" value="Unsubscribe" />
</form>

＆＃13;

当我选中All复选框时，它当然会标记所有复选框，但是当我取消选中一个复选框后，仍然会选中All复选框。这应该是未选中的。我应该如何使用JS？

Answer 1

您需要为每个复选框添加onchange个事件处理程序，并检查内部是否有＆＃34;全部＆＃34;应选中复选框（选中所有复选框）或取消选中（至少取消选中一个）。例如：

＆＃13;

var checkboxes =  [].slice.call(document.getElementsByName('options[]')),
    allCheckbox = document.querySelector('input[value="All"]');

checkboxes.forEach(function(checkbox) {
    checkbox.onchange = function() {
        if (!this.checked) {
            allCheckbox.checked = false;
        }
        else {
            var checked = checkboxes.filter(function(check) {
                return check.checked;
            });
            if (checked.length === checkboxes.length) {
                allCheckbox.checked = true;
            }
        }
    };
});

function toggle(source) {
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
    }
}

＆＃13;

<form class="unsubscribe_form" action="process.php" method="post">
    <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
    <label for="checkbox-1-1"></label>Option 1
    <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
    <label for="checkbox-1-2"></label>Option 2
    <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
    <label for="checkbox-1-3"></label>Option 3
    <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
    <label for="checkbox-1-4"></label>Option 4
    <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
    <label for="checkbox-1-5"></label>Option 5
    <input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
    <label for="checkbox-1-6"></label>All
</form>

＆＃13;

请注意，为了使用方便的数组方法，我将复选框集合转换为带有[].slice.call的数组。可以使用简单的for循环。

Answer 2

我建议如下：

function toggle() {
  // getting a reference to all the 'name="option[]" elements:
  var options = document.getElementsByName('options[]'),
    // a reference to the 'all' checkbox:
    all = document.getElementById('checkbox-1-6');

  // if the changed checkbox is the 'all':
  if (this === all) {
    // we iterate over all the options checkboxes (using
    // Array.prototype.forEach()):
    Array.prototype.forEach.call(options, function(checkbox) {
      // and we set their checked property to the checked property
      // state of the 'all' checkbox:
      checkbox.checked = all.checked;
    });
  } else {
    // otherwise we set the 'all' checkbox to the state of
    // the Boolean returned by Array.prototype.every(),
    // which returns true if all checkboxes evaluate to
    // the condition within the function, otherwise false:
    all.checked = Array.prototype.every.call(options, function(checkbox) {
      return checkbox.checked;
    });
  }
}

// getting a NodeList of all the elements of 'class="unsubscribe-checkbox"':
var options = document.querySelectorAll('.unsubscribe-checkbox');

// iterating over them, again with Array.prototype.forEach()
// and assigning a change event-listener, which will execute the
// name function:
Array.prototype.forEach.call(options, function(opt) {
  opt.addEventListener('change', toggle);
});

＆＃13;

function toggle() {
  var options = document.getElementsByName('options[]'),
    all = document.getElementById('checkbox-1-6');
  if (this === all) {
    Array.prototype.forEach.call(options, function(checkbox) {
      checkbox.checked = all.checked;
    });
  } else {
    all.checked = Array.prototype.every.call(options, function(checkbox) {
      return checkbox.checked;
    });
  }
}

var options = document.querySelectorAll('.unsubscribe-checkbox');

Array.prototype.forEach.call(options, function(opt) {
  opt.addEventListener('change', toggle);
});

＆＃13;

<form class="unsubscribe_form" action="process.php" method="post">
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
  <label for="checkbox-1-1"></label>Option 1
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
  <label for="checkbox-1-2"></label>Option 2
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
  <label for="checkbox-1-3"></label>Option 3
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
  <label for="checkbox-1-4"></label>Option 4
  <input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
  <label for="checkbox-1-5"></label>Option 5
  <input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" />
  <label for="checkbox-1-6"></label>All
  <br>
  <input type="submit" name="formSubmit" value="Unsubscribe" />
</form>

＆＃13;

您可能会注意到我已从“所有＆＃39;”中删除了onClick属性。复选框，优先于不显眼的JavaScript，其中事件处理程序是通过JavaScript本身分配的（通常用于更容易维护的代码，因为要传递给给定函数的参数在代码本身中分配，而不是在HTML中单独更新。

参考文献：

应取消选中“全部选中”复选框

2 个答案: