Find all unchecked checkboxes in jQuery

JqueryHtmlInputCheckbox

Jquery Problem Overview


I have a list of checkboxes:

<input type="checkbox" name="answer" id="id_1' value="1" />
<input type="checkbox" name="answer" id="id_2' value="2" />
...
<input type="checkbox" name="answer" id="id_n' value="n" />

I can collect all the values of checked checkboxes; my question is how can get all the values of unchecked checkboxes? I tried:

$("input:unchecked").val();

to get an unchecked checkbox's value, but I got:

> Syntax error, unrecognized expression: unchecked.

Can anybody shed a light on this issue? Thank you!

Jquery Solutions


Solution 1 - Jquery

As the error message states, jQuery does not include a :unchecked selector.
Instead, you need to invert the :checked selector:

$("input:checkbox:not(:checked)")

Solution 2 - Jquery

$("input:checkbox:not(:checked)") Will get you the unchecked boxes.

Solution 3 - Jquery

Also it can be achieved with pure js in such a way:

var matches = document.querySelectorAll('input[type="checkbox"]:not(:checked)');

Solution 4 - Jquery

You can do so by extending jQuerys functionality. This will shorten the amount of text you have to write for the selector.

$.extend($.expr[':'], {
        unchecked: function (obj) {
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        }
    }
);

You can then use $("input:unchecked") to get all checkboxes and radio buttons that are checked.

Solution 5 - Jquery

$("input[type='checkbox']:not(:checked):not('\#chkAll\')").map(function () { 
   var a = ""; 
   if (this.name != "chkAll") { 
      a = this.name + "|off"; 
   } 
   return a; 
}).get().join();

This will retrieve all unchecked checkboxes and exclude the "chkAll" checkbox that I use to check|uncheck all checkboxes. Since I want to know what value I'm passing to the database I set these to off, since the checkboxes give me a value of on.

//looking for unchecked checkboxes, but don’t include the checkbox all that checks or unchecks all checkboxes
//.map - Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

//.get - Retrieve the DOM elements matched by the jQuery object.
//.join - (javascript) joins the elements of an array into a string, and returns the string.The elements will be separated by a specified separator. The default separator is comma (,).

Solution 6 - Jquery

You can use like this :

$(":checkbox:not(:checked)")

Solution 7 - Jquery

To select by class, you can do this:

$("input.className:checkbox:not(:checked)")

Solution 8 - Jquery

$(".clscss-row").each(function () {
if ($(this).find(".po-checkbox").not(":checked")) {
               // enter your code here
            } });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGaryView Question on Stackoverflow
Solution 1 - JquerySLaksView Answer on Stackoverflow
Solution 2 - JquerydaveView Answer on Stackoverflow
Solution 3 - JqueryPavel GrizaView Answer on Stackoverflow
Solution 4 - JqueryThulasiramView Answer on Stackoverflow
Solution 5 - JquerycdubView Answer on Stackoverflow
Solution 6 - JqueryEhsanView Answer on Stackoverflow
Solution 7 - JqueryChukwuemeka InyaView Answer on Stackoverflow
Solution 8 - JqueryUTHIRASAMYView Answer on Stackoverflow