In this article, we will learn how to check or uncheck a radio button using jquery or javascript. There are two ways to check or uncheck the radio button 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 radio button dynamically using Jquery or Javascript.
In this example, we used the prop() function to check or uncheck the radio button 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 radio button 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 Radio Button using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="radio" name="radio" id="radio" /> Radio Button<br />
<button type="button" id="btn_check">Check</button>
<button type="button" id="btn_uncheck">UnCheck</button>
<script>
// For Check the Radio Button
$("#btn_check").on("click", function () {
$("#radio").prop("checked", true);
});
// For UnCheck the Radio Button
$("#btn_uncheck").on("click", function () {
$("#radio").prop("checked", false);
});
</script>
</body>
</html>In this method, we used the attr() method to check or uncheck the radio button dynamically on button click or on hyperlink click.
Here is the source code of the example to check or uncheck the radio button 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 Radio Button using Jquery or Javascript</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="radio" name="radio" id="radio" /> Radio Button<br />
<button type="button" id="btn_check">Check</button>
<button type="button" id="btn_uncheck">UnCheck</button>
<script>
// For Check the Radio Button
$("#btn_check").on("click", function () {
$("#radio").attr("checked", true);
});
// For UnCheck the Radio Button
$("#btn_uncheck").on("click", function () {
$("#radio").attr("checked", false);
});
</script>
</body>
</html>I hope this article will help you to understand how to check or uncheck the radio button dynamically using Jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments