How to uncheck and check a radio button using Javascript/jQuery?

Table of contents

how to uncheck and check radio button using jquery

In my previous post, I share how to uncheck the radio button now I will share with you how to switch the radio button to uncheck and check using the click button event in javascript/jquery. To see the sample out kindly see below.

Before

After

Example code

<!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 button = $(this);
				var status = $(".status");

				if(status.is(":checked")) {
					status.prop("checked", false);
					button.html("Activate");
				} else {
					status.prop("checked", true);
					button.html("Deactivate");
				}
				
			});
		});
	</script>
</body>
</html>

Thank you for reading I hope it helps. Happy coding :)

How to uncheck and check a radio button using Javascript/jQuery?

Sponsor