How to check a checkbox with jQuery?
Last Updated :
14 Dec, 2023
In this article, we will learn about the different methods to dynamically check a checkbox using jQuery. There are three methods by which you can dynamically check the currently selected checkbox by changing the checked property of the input type.
By using checked property directly
In this method, we will select the element using the element selector and directly use the checked property on the item that is present at the passed index of the selected elements, and set its value to true.
Syntax:
$('element_selector')[index].checked = true;
Example: The below example will explain the use of the checked property to check the checkbox using jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to check a checkbox with jQuery?
</title>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
jQuery Check/Uncheck Checkbox
</b>
<p>
<input
type="checkbox"
class="checkboxes"
name="option"
id="front">
Front-End
<input
type="checkbox"
class="checkboxes"
name="option"
id="back">
Back-End
</p>
<p>
<button
type="button"
class="check-front">
Subscribe Front-End
</button>
<button
type="button"
class="check-back">
Subscribe Back-End
</button>
<button
type="button"
class="reset">
Reset
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-front").click(function() {
$(".checkboxes")[0].checked = true;
});
$(".check-back").click(function() {
$(".checkboxes")[1].checked = true;
});
$(".reset").click(function() {
$(".checkboxes")[0].checked = false;
$(".checkboxes")[1].checked = false;
});
});
</script>
</center>
</body>
</html>
|
Output:
The input can be accessed and its property can be set by using the prop() method. This method manipulates the ‘checked’ property and sets it to true or false depending on whether we want to check or uncheck it.
Syntax:
$("element").prop("checked", true)
Example: The below example uses the prop() method of jQuery to check the checbox.
html
<!DOCTYPE html>
<head>
<title>
How to check a checkbox with jQuery?
</title>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
jQuery Check/Uncheck Checkbox
</b>
<p>
<input
type="checkbox"
name="option"
id="front">
Front-End
<input
type="checkbox"
name="option"
id="back">
Back-End
</p>
<p>
<button
type="button"
class="check-front">
Subscribe Front-End
</button>
<button
type="button"
class="check-back">
Subscribe Back-End
</button>
<button
type="button"
class="reset">
Reset
</button>
</p>
<script type="text/javascript">
$(document).ready(function () {
$(".check-front").click(function () {
$("#front").prop("checked", true);
});
$(".check-back").click(function () {
$("#back").prop("checked", true);
});
$(".reset").click(function () {
$("#front").prop("checked", false);
$("#back").prop("checked", false);
});
});
</script>
</center>
</body>
</html>
|
Output:
It is similar to the above method and more suitable for older jQuery versions. The input can be accessed and its property can be set by using the attr() method. We have to manipulate the ‘checked’ attribute and set it to true or false depending on whether we want to check or uncheck it.
Syntax:
$("element").attr("checked", true)
Example: The below code example implements the attr() method to check the checkbox.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to check a checkbox with jQuery?
</title>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
jQuery Check/Uncheck Checkbox
</b>
<p>
<input
type="checkbox"
name="option"
id="Front">
Front-End
<input
type="checkbox"
name="option"
id="Back">
Back-End
</p>
<p>
<button
type="button"
class="check-Front">
Subscribe Front-End
</button>
<button
type="button"
class="check-Back">
Subscribe Back-End
</button>
<button
type="button"
class="reset">
Reset
</button>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".check-Front").click(function() {
$("#Front").attr("checked", true);
});
$(".check-Back").click(function() {
$("#Back").attr("checked", true);
});
$(".reset").click(function() {
$("#Front").attr("checked", false);
$("#Back").attr("checked", false);
});
});
</script>
</center>
</body>
</html>
|
Output:
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...