How to check if all checkboxes are unchecked
Here, a short and very simple example (Vanilla Javascript):
if (document.querySelectorAll('input[type="checkbox"]:checked').length === document.querySelectorAll('input[type="checkbox"]').length) {
console.log('All checkboxes are checked');
} else {
console.log('Some checkboxes are not checked');
}
Here in jQuery syntax:
if ($('input[type="checkbox"]:checked').length === $('input[type="checkbox"]').length) {
console.log('All checkboxes are checked');
} else {
console.log('Some checkboxes are not checked');
}
Another way to do it, with the :not() pseudo-selector:
if (document.querySelectorAll('input[type="checkbox"]:not(:checked)').length) {
console.log('Some checkbox are not checked');
}
The following should do the trick:
var textinputs = document.querySelectorAll('input[type=checkbox]');
var empty = [].filter.call( textinputs, function( el ) {
return !el.checked
});
if (textinputs.length == empty.length) {
alert("None filled");
return false;
}
You can simplify a little, given that you're able to use querySelectorAll()
:
var checked = document.querySelectorAll('input:checked');
if (checked.length === 0) {
// there are no checked checkboxes
console.log('no checkboxes checked');
} else {
// there are some checked checkboxes
console.log(checked.length + ' checkboxes checked');
}
JS Fiddle (with no checkboxes checked).
JS Fiddle (with some checkboxes checked).
Or, if all you want is a Boolean value to indicate whether any checkbox is checked, for use in a function:
var isChecked = document.querySelectorAll('input:checked').length === 0 ? false : true;
return isChecked;
Proof-of-concept demo.
You could, of course, avoid creating a variable and simply return the result of the ternary; I only used the variable to try and make it clear what, precisely, I was returning/testing-for.
Reference:
:checked
pseudo-class.