Answer: You can use .prop() method to check whether a checkbox is checked in jQuery.
A checkbox is an HTML element that allows multiple users to make multiple selections from a list of options. jQuery will help you with many tasks in Javascript making it easier to write less code with more functionality. There are a few more methods to check whether a checkbox is checked in jQuery such as .is(), checked property, and :checked selector. We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Check Whether a Checkbox is Checked in jQuery
There are a few methods to check whether a checkbox is checked in jQuery. You can do this using HTML elements and JavaScript.
Method 1: Using .prop() Method to Check Whether a Checkbox is Checked in jQuery
You can use the ‘.prop()’ method to check if a checkbox is selected. You can use this method for handling properties like checked, disabled, and selected.
Example:
<label for="myCheckbox">Check me</label>
<input type="checkbox" id="myCheckbox" name="check" style="transform: scale(1.5);">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myCheckbox').click(function() {
if ($(this).prop('checked')) {
alert('Checkbox is checked');
} else {
alert('Checkbox is unchecked');
}
});
});
</script>
Output:
Explanation: You will get a popup message when a checkbox is clicked. The script will check if the checkbox is selected using the prop() method.
Method 2: Using .is() Method to Check Whether a Checkbox is Checked in jQuery
You can use the .is() method to match the elements with selectors. You can also use .is() to check if a checkbox is checked.
Example:
<label for="myCheckbox">Check me</label>
<input type="checkbox" id="myCheckbox" name="check" style="transform: scale(1.5);">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myCheckbox').click(function() {
if ($(this).is(':checked')) {
alert('Checkbox is checked');
} else {
alert('Checkbox is unchecked');
}
});
});
</script>
Output:
Explanation: When the checkbox is clicked, the script will check it using the is() method. If the check box is checked or not, it will give the alert message.
Method 3: Using Checked Property to Check Whether a Checkbox is Checked in jQuery
You can use the checked property in Javascript to verify checkbox is checked or not. The script returns true if checked, and false if not checked.
Example:
<label for="myCheckbox">Check me</label>
<input type="checkbox" id="myCheckbox" name="check" style="transform: scale(1.5);">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myCheckbox').click(function() {
if (this.checked) {
alert('Checkbox is checked');
} else {
alert('Checkbox is unchecked');
}
});
});
</script>
Output:
Explanation: The code will check the checkbox and an Alert message will pop up when the checkbox is checked or not.
Method 4: Using :checked Selector to Check Whether a Checkbox is Checked in jQuery
You can use :checked selector in jQuery to select elements that are checked like checkboxes.
Example:
<input type="checkbox" class="myCheckbox" value="1" name="check1" style="transform: scale(1.5);">
<label for="check1">Checkbox 1</label>
<input type="checkbox" class="myCheckbox" value="2" name="check2" style="transform: scale(1.5);">
<label for="check2">Checkbox 2</label>
<input type="checkbox" class="myCheckbox" value="3" name="check3" style="transform: scale(1.5);">
<label for="check3">Checkbox 3</label>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function() {
$('.myCheckbox:checked').each(function() {
alert('Checkbox ' + $(this).val() + ' is checked');
});
});
});
</script>
<button>Check which boxes are checked</button>
Output:
Explanation: The :checked selector checks all the checkboxes and iterates through them to show the message.
Method 5: Using Check Event to Check Whether a Checkbox is Checked in jQuery
You can use the “change” event to detect the state of the checkbox. It will show the status of checkboxes through the alert message.
Example:
<label for="myCheckbox">Check me</label>
<input type="checkbox" id="myCheckbox" name="check" style="transform: scale(1.5);">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myCheckbox').change(function() {
if ($(this).is(':checked')) {
alert('Checkbox is checked');
} else {
alert('Checkbox is unchecked');
}
});
});
</script>
Output:
Explanation: When you check or uncheck the box, it checks the status and shows an alert saying “Checkbox is checked” or “Checkbox is unchecked”.
Method 6: Using .each() Method to Check Multiple Checkboxes if They are Checked in jQuery
You can use the .each() method in jQuery to loop through multiple checkboxes and check if they are selected.
Example:
<input type="checkbox" name="alphabet" value="A" id="A"> A<br>
<input type="checkbox" name="alphabet" value="B" id="B"> B<br>
<input type="checkbox" name="alphabet" value="C" id="C"> C<br>
<input type="checkbox" name="alphabet" value="D" id="D"> D<br>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
// Loop through each checkbox with name 'alphabet'
$('input[name="alphabet"]').each(function() {
if ($(this).is(':checked')) {
alert('You selected: ' + $(this).val());
}
});
});
});
</script>
<button>Check</button>
Output:
Explanation: When each checkbox is checked, it will show an alert message. This method iterates through each checkbox and checks them one by one.
Conclusion
You can use the jQuery to check whether a checkbox is checked or not. The .prop() is a basic method to verify the checkboxes and .is() checks for the elements that match the selector. The above-discussed methods are the most efficient way to change the element’s class.