How to check whether a checkbox is checked in jQuery?

03 Aug, 2021
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:
<!DOCTYPE html><html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </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>
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:
<!DOCTYPE html><html>  <head>    <style>        div {            width: 80px;            height: 80px;            padding: 10px;            border: 2px solid green;        }                  button {            margin-top: 10px;        }    </style>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </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>
Output:Before click on button checkbox is clicked:
After click on the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
Scroll to the top of the page using JavaScript/jQuery
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?