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:
<!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:
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.
Please Login to comment...