In this article, we will learn how to check or uncheck a checkbox using jquery or javascript. There are two ways to check or uncheck the checkbox dynamically using jquery or javascript. The first way is to use the prop() function and the second is to use the attr() function of jquery.
Here are the examples to check or uncheck the checkbox dynamically using Jquery or Javascript.
In this example, we used the prop() function to check or uncheck the checkbox dynamically on button click or on hyperlink click. This prop() function requires Jquery library 1.6 or above version.
Here is the source code of the Example to check or uncheck the checkbox dynamically using the prop() function in Jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How to Check or Uncheck Checkbox using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox1" id="checkbox1" /> CheckBox1<br />
<button type="button" id="btn_check">Check</button>
<button type="button" id="btn_uncheck">UnCheck</button>
<script>
$("#btn_check").on("click", function () {
$("#checkbox1").prop("checked", true);
});
$("#btn_uncheck").on("click", function () {
$("#checkbox1").prop("checked", false);
});
</script>
</body>
</html>In this method, we used the attr() method to check or uncheck the checkbox dynamically on button click or on hyperlink click.
Here is the source code of the example to check or uncheck the checkbox dynamically using the attr() function in JQuery or Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>How to Check or Uncheck Checkbox using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="checkbox" name="checkbox1" id="checkbox1" /> CheckBox1<br />
<button type="button" id="btn_check">Check</button>
<button type="button" id="btn_uncheck">UnCheck</button>
<script>
$("#btn_check").on("click", function () {
$("#checkbox1").attr("checked", true);
});
$("#btn_uncheck").on("click", function () {
$("#checkbox1").attr("checked", false);
});
</script>
</body>
</html>
I hope this article will help you to understand how to check or uncheck the checkbox dynamically using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments