Last Updated on June 3, 2021 by Roshan Parihar
In this tutorial, learn how to check if checkbox is checked or not. The short answer is: use the is() function of jQuery and pass :checked as its attribute to get the checked checkbox.
There are many other useful methods to check the status of the checkbox using jQuery.Let’s find out with the examples given below here in this tutorial.
Method 1: Using is() of jQuery to Check If Checkbox is Checked on Button Click
The is() method is the most used method to check the status of the checkbox or any other condition of the HTML element. To find the checkbox is check, you need to pass the “:checked” as the argument of the is(). If you want to check the checkbox is unchecked, pass “:not(:checked)” as an argument of the function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $("#checkcheckboxisName").click(function(){ if($(this).is(":checked")){ alert("The checkbox of name is checked"); }else if($(this).is(":not(:checked)")){ alert("The checkbox of name is unchecked"); } }); }); </script> <form action="#" method="get"> <input type="checkbox" name="Name" id="checkcheckboxisName" value="Name">Name </form> <p>Click the checkboxes to check the status.</p> |
Output
Click the checkboxes to check the status.
When you click the checkbox given above, it displays an alert box that contains the result of whether the checkbox is checked or not.
Method 2: Using prop() function in JQuery
In addition to the above method, you can also use the jQuery prop() method provides you simple syntax to use in your code and check the status of the checkbox. It checks the condition whether it is true or not. If the condition is true, it confirms that the checkbox is check.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $("#checkcheckboxName").click(function(){ if($(this).prop("checked") == true){ alert("The checkbox of name is checked"); }else if($(this).prop("checked") == false){ alert("The checkbox of name is unchecked"); } }); }); </script> <form action="#" method="get"> <input type="checkbox" name="Name" id="checkcheckboxName" value="Name">Name </form> <p>Click the checkboxes to check the status.</p> |
Output
Click the checkboxes to check the status.
The above example displays an alert message box to display the result of the method. You can click the checkbox given above to check the current status of the checkbox.
How to Make Checkbox Checked Using jQuery?
To make the checkbox checked, you can use the attr() function that takes two arguments to pass. The first argument is :checked and the second argument is true to set the checkbox checked.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $("#btn-checked").click(function(){ $("#mycheckbox").attr("checked","true"); }); }); </script> <button id="btn-checked" class="btn btn-primary">Set Checked</button> <form action="#" method="get"> <input type="checkbox" name="Name" id="mycheckbox" value="Name">Name </form> |
Output
The above example makes the checkbox checked on click of the button given. Click the button to see the changes.
You May Also Like to Read