Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set "checked" for a checkbox with jQuery?
Use the checked attribute to set the checkbox with jQuery. The prop() method is the recommended approach for getting and setting properties like checked, while attr() handles HTML attributes.
Setting Checkbox to Checked
To programmatically check a checkbox, use the prop() method with the value true ?
// Check a checkbox
$("#myCheckbox").prop("checked", true);
// Uncheck a checkbox
$("#myCheckbox").prop("checked", false);
Complete Example
You can try to run the following code to learn how to set checked for a checkbox ?
<!DOCTYPE html>
<html>
<head>
<title>jQuery Checkbox Example</title>
<style>
b {
color: green;
}
.controls {
margin: 10px 0;
}
button {
margin: 5px;
padding: 5px 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="checkbox1" type="checkbox" checked="checked">
<label for="checkbox1">Check/Uncheck this checkbox</label>
<div class="controls">
<button id="checkBtn">Check Box</button>
<button id="uncheckBtn">Uncheck Box</button>
</div>
<p id="status"></p>
<script>
$(document).ready(function() {
// Function to update status
function updateStatus() {
var $input = $("#checkbox1");
$("#status").html(
".attr("checked"): <b>" + $input.attr("checked") + "</b><br>" +
".prop("checked"): <b>" + $input.prop("checked") + "</b><br>" +
".is(":checked"): <b>" + $input.is(":checked") + "</b>"
);
}
// Check button click
$("#checkBtn").click(function() {
$("#checkbox1").prop("checked", true);
updateStatus();
});
// Uncheck button click
$("#uncheckBtn").click(function() {
$("#checkbox1").prop("checked", false);
updateStatus();
});
// Checkbox change event
$("#checkbox1").change(function() {
updateStatus();
});
// Initial status update
updateStatus();
});
</script>
</body>
</html>
Key Differences
Understanding the difference between these methods is important ?
-
prop("checked")? Returns the current state (true/false) -
attr("checked")? Returns the HTML attribute value -
is(":checked")? Returns boolean for current checked state
Conclusion
Use prop("checked", true) to check a checkbox and prop("checked", false) to uncheck it. The prop() method is preferred over attr() for boolean properties in modern jQuery.
Updated on: 2026-03-13T18:13:10+05:30
2K+ Views
Advertisements