How to check whether a checkbox is checked in jQuery?

prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not.

prop(): This method provides an simple way to track down the status of checkboxes. It works well in every condition because every checkbox has checked property which specifies its checked or unchecked status.

is(): This method is also very simple and easy to use. By using this we can easily find whether a checked box is checked or not.

Using the jQuery prop() Method:
Syntax:

$(selector).prop(parameter) 

Parameter: Here parameter is the present status of the Checkbox.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
</head>
  
<body>
    <div style="width: 80px;
            height: 80px;
            padding: 10px;
            border: 2px solid green;">
        
        <input type="checkbox" 
               name="radio1"
               checked />
        <script>
            $(document).ready(function() {
                $("#but").click(function() {
                    if ($("input[type=checkbox]").prop(
                      ":checked")) {
                        alert("Check box in Checked");
                    } else {
                        alert("Check box is Unchecked");
                    }
                });
            });
        </script>
  
        <br>
  
        <button style="margin-top:10px"
                id="but" 
                type="submit">
          Submit
      </button>
    </div>
</body>
  
</html>

chevron_right


Output:
Before click on button checkbox is unclicked:

After click on the button:

Using the jQuery is() Method :
Syntax :

$(selector).is(parameter) 

Parameter: Here parameter is the present status of the Checkbox.

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        div {
            width: 80px;
            height: 80px;
            padding: 10px;
            border: 2px solid green;
        }
          
        button {
            margin-top: 10px;
        }
    </style>
    <script src=
  </script>
  
</head>
  
<body>
    <div>
        <input type="checkbox"
               name="radio1" 
               checked />
        <script>
            $(document).ready(function() {
                $("#but").click(function() {
                    if ($("input[type=checkbox]").is(
                      ":checked")) {
                        alert("Check box in Checked");
                    } else {
                        alert("Check box is Unchecked");
                    }
                });
            });
        </script>
  
        <br>
  
        <button id="but" 
                type="submit">
          Submit 
      </button>
    </div>
</body>
  
</html>

chevron_right


Output:
Before click on button checkbox is clicked:

After click on the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.