CODEWITHSUNDEEP
javascripthtml
user2014429
user2014429

Reputation: 2567

How to check if all checkboxes are unchecked

I am trying to make a function to check if all checkboxes are unchecked. I have a similar function for text boxes. As I have not worked with checkboxes much before, I'm not sure how to adapt it except for changing input[type=text] to input[type=checkbox].

Can anyone help me out? Thanks. 

var textinputs = document.querySelectorAll('input[type=text]'); 
var empty = [].filter.call( textinputs, function( el ) {
     return !el.value
});

    if (textinputs.length == empty.length) {
        alert("None filled");
        return false;
}

Upvotes: 36

Views: 108996

Answers (7)

nicotina
nicotina

Reputation: 41

Pseudo class input[type="checkbox"]:not(":checked") should work perfectly in jquery:

var checkboxes = { id:"hello", value:"value", checked:"false" }

$('.post-text').append('<div id="wrappingcheckboxes"></div>'); for (var i = 0; i<= 10; i ++){ $('#wrappingcheckboxes').append("<input type='checkbox' value='"+checkboxes.value + i + "' id='"+checkboxes.id + i+"'/>");}
$('#wrappingcheckboxes input[type="checkbox"]:not(":checked")')

using this page's console

Upvotes: 2

Jeff Beagley
Jeff Beagley

Reputation: 1025

Here is how to iterate over multiple input fields and grab each checked one. I generally use this to add selected elements to their own array

let els = document.querySelectorAll("input[type=checkbox]");

els.forEach((v) => {
    if(v.checked) {
        //checked

    }

});

If you don't want to iterate over every checkbox, you can iterate over just the selected ones by changing the query selector from input[type=checkbox] to input[type=checkbox]:checked

Upvotes: 0

Zlitus
Zlitus

Reputation: 128

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');
}

Upvotes: 7

Saad Hasan
Saad Hasan

Reputation: 488

This works for me, Give all your checkboxes one class name then:

        if ($('.ClassName:checked').length == 0) {
            // do your job
        }

Upvotes: 0

Kurkula
Kurkula

Reputation: 6762

I would recommend name spacing with class or id

var checked = document.querySelectorAll('input.myClassName:checked');

//or

var checked = document.querySelectorAll('input#myIdName:checked');

if (checked.length === 0) {

    console.log('no checkboxes checked');
} else {

    console.log(checked.length + ' checkboxes checked');
}

Upvotes: 4

David Thomas
David Thomas

Reputation: 253307

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:

Upvotes: 31

endyourif
endyourif

Reputation: 2202

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;
}

Upvotes: 45

Related Questions