jQuery Find Checkbox Checked Examples
While working with checkboxes and jQuery, there could be a time when you want to check if checkbox is checked or not. It’s quite possible that you might want to check if single checkbox is checked or an array of checkbox is checked or not. Depending upon the checked checkboxes, you may want to trigger an action, or gather the count, etc. In this article, I am going to share few examples to find if a checkbox is checked or not using jQuery. Read on to find out more.
How to Check if Checkbox is Checked using jQuery
To find if checkbox is checked or not, there will be 2 possible cases that we will need to discuss.
1. There could be a single checkbox and may want to check if this single checkbox is checked or not.
2. There could be an array of checkbox and may want to check if each of those checkboxes are checked or not.
For the sake of example, let’s try to deal with the first case, first.
Example 1: Check if Checkbox is Checked or not for Single Checkbox
Here is the full code (HTML + jQuery):
<html>
<head>
<title>Example to Check if Checkbox is Checked using jQuery</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<label>
<input type="checkbox" name="subscribe" class="subscribe" value="Email" id="subscribe_0" />
Email</label>
</form>
<button id="check">Check</button>
<script type="text/javascript">
$('#check').click(function() {
alert( $('input[name="subscribe"]').is(':checked') );
});
});
</script>
</body>
</html>When you run the above code and click on the “Check” button, “false” will be alerted. If you check the checkbox and then click on “Check” button, “true” will be alerted.
Example 2: Check if Checkbox is Checked or not for Array of Checkboxes
Here is the full code (HTML + jQuery):
<html>
<head>
<title>Example to find if a Checkbox is Checked or not using jQuery</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<label>
<input type="checkbox" name="subscribe[]" class="subscribe" value="Email" id="subscribe_0" />
Email</label>
<br />
<label>
<input type="checkbox" name="subscribe[]" class="subscribe" value="SMS" id="subscribe_1" />
SMS</label>
<br />
<label>
<input type="checkbox" name="subscribe[]" class="subscribe" value="Radio" id="subscribe_2" />
Radio</label>
<br />
</form>
<button id="check">Check</button>
<script type="text/javascript">
$('#check').click(function() {
$( 'input[name="subscribe[]"]' ).each(function() {
if( $(this).is(':checked') )
{
alert( 'Checked' );
}
else
{
alert( 'Not checked' );
}
});
});
</script>
</body>
</html>Note the usage of [] in the name of the checkbox. We are making an array of those checkboxes. So when you run the above code and click on the “Check” button, you will notice that “Not Checked” will be alerted 3 times. This happens because we are using .each() to run through the entire array of subscribe[] checkboxes and then check whether each of them are checked or not. If you check any/all checkbox(es) and then click on “Check” button, the words “Checked” & “Not Checked” will be alerted as many times as the checkboxes are checked & not checked, respectively.
Your Turn!
Do you know of any other ways to find if Checkbox is Checked or not using jQuery? Feel free to suggest by commenting below.