Skip to content
Related Articles

Related Articles

How to check whether a checkbox is checked in jQuery?
  • Last Updated : 29 Apr, 2019

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=
  </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=
  </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:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :