How to unchecked a radio button using JavaScript/jQuery?

In this post, I will share with you how to uncheck the checked radio button using the button click event in jquery. We are using element.prop(checked,false) so that the radio button checked will be unchecked.

Created on: Aug 15, 2021
923
How to unchecked a radio button using JavaScript/jQuery?

In this post, I will share with you how to uncheck the checked radio button using the button click event in jquery. We are using element.prop("checked",false) so that the radio button checked will be unchecked.

Before

how to unchecked a radio button using javascript/jquery

After

how to unchecked a radio button using jquery

Here is the example code below:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>How to unchecked a radio button using JavaScript/jQuery?</title>
</head>
<body>
	<h1>How to unchecked a radio button using JavaScript/jQuery?</h1>

	<form id="form1">
		

		<p><b>Current Status</b></p>
		<input type="radio" value="1" name="status" class="status" checked> Active

		<br/><br/>

		<button type="button" id="btnSubmit">Deactivate</button>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#btnSubmit").on("click", function() {
				var status = $(".status");
				status.prop("checked", false);
			});
		});
	</script>
</body>
</html>

I hope it helps. Happy coding :)

Leave a Comment