Find all unchecked checkboxes in jQuery

By using jQuery, we have to find all unchecked checkboxes.
Submitted by Pratishtha Saxena, on June 23, 2022

jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and event handling. It is free, open-source software. It is user-friendly and easy to use.

Note: Always remember to apply the CDN link while working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

There are many times that we need to find the value of the checkboxes that are checked. To do this we already have :checked selector in jQuery.

Now, to find the value of all the unchecked checkboxes, there is no such selector like :unchecked in jQuery. So how can we get unchecked checkboxes in jQuery? For this, we just invert the :checked selector in such a way that it returns the unchecked checkboxes.

Syntax:

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

Since we are not having any particular selector to check the unchecked checkboxes in jQuery, :not selector can be used in such a way that if the checkbox is checked it will not return anything and will return only if the checkboxes are unchecked.

jQuery code to Find all unchecked checkboxes

HTML Code:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <input type="checkbox" class="attribute" id="first" value="ONE"> Apple
      <input type="checkbox" class="attribute" id="second" value="TWO" checked> Mango
      <input type="checkbox" class="attribute" id="third" value="THREE"> Banana
      <input type="checkbox" class="attribute" id="fourth" value="FOUR"> Grapes
   </body>
</html>

jQuery Function:

<script>
    $(function() {
        $("input:checkbox:not(:checked)").each(function () {
            console.log("Id: " + $(this).attr("id") + " , Value: " + $(this).val());
        });
    });
</script>

Output:

Example: Unchecked checkboxes using jQuery

How to exclude $(this) from a jQuery selector?

How to generate a simple popup using jQuery?

Related Examples

Comments and Discussions!

Load comments ↻