How to check and uncheck a radio button using jQuery

In this tutorial, we are going to see how to check and uncheck a radio button using jQuery. You can easily use the method prop() of jQuery to check / uncheck a radio button dynamically, for example by clicking a button. The prop() method requires a version of jQuery > 1.6.

How to check and uncheck a radio button using jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Check and uncheck a radio button</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".check-on").click(function(){
					$("#on").prop("checked", true);
				});
				$(".check-off").click(function(){
					$("#off").prop("checked", true);
				});
			});
		</script>
	</head>
	<body>
		<label><input type="radio" name="state" id="on"> On</label>
		<label><input type="radio" name="state" id="off"> Off</label>
		<br>
		<button type="button" class="check-on">Enable</button>
		<button type="button" class="check-off">Disable</button>  
	</body>
</html>

Result
On Off

How to check and uncheck a radio button using jQuery

You May Also Like

How to remove a tag without deleting its content with jQuery

How to find mouse position relative to the document with jQuery

How to bind onclick event to dynamically added HTML element with jQuery

Leave a Reply Cancel reply