[英]Check All checkbox should be unchecked
function toggle(source) { checkboxes = document.getElementsByName('options[]'); for (var i = 0, n = checkboxes.length; i < n; i++) { checkboxes[i].checked = source.checked; } }
<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>
When I check the All checkbox, of course, it will mark all the checkboxes, but once I uncheck one checkbox, the All checkbox is still checked. 当然,当我选中“全部”复选框时,它将标记所有复选框,但是当我取消选中一个复选框时,“全部”复选框仍处于选中状态。 This should be unchecked. 这应该是未选中的。 How should I do that using JS? 我应该如何使用JS做到这一点?
You will need to add onchange
event handlers to every checkbox and check inside if the "All" checkbox should be checked (all checkboxes are selected) or unchecked (at least one is deselected). 您将需要向每个复选框添加onchange
事件处理程序,并在内部检查是否应选中“所有”复选框(选中所有复选框)还是不选中(至少选中一个复选框)。 For example like this: 例如这样:
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; } }
<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>
Note that I converted checkboxes collection to array with [].slice.call
in order to use convenient array methods. 请注意,为了使用方便的数组方法,我使用[].slice.call
将复选框集合转换为数组。 Simple for loops can be used instead. 可以使用简单的for循环。
I'd suggest the following: 我建议以下内容:
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);
});
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); });
<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>
You may notice that I've removed the onClick
attribute from the 'all' checkbox, in preference of unobtrusive JavaScript, where the event-handlers are assigned via the JavaScript itself (which ordinarily makes for more easily-maintained code, as the arguments to be passed to a given function are assigned in the code itself, rather than having to be separately updated in the HTML). 您可能会注意到,我已经从'all'复选框中删除了onClick
属性,而不是使用不引人注目的JavaScript,因为事件处理程序是通过JavaScript本身分配的(通常,这样处理起来更容易维护代码,作为传递给给定函数是在代码本身中分配的,而不是必须在HTML中单独进行更新)。
References: 参考文献:
Array.prototype.every()
. Array.prototype.every()
。 Array.prototype.forEach()
. Array.prototype.forEach()
。 document.getElementsByName()
. document.getElementsByName()
。 document.getElementById()
. document.getElementById()
。 document.querySelectorAll()
. document.querySelectorAll()
。 EventTarget.addEventListener()
. EventTarget.addEventListener()
。 Function.prototype.call()
. Function.prototype.call()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.