Table of contents

Check Radio Button Based On Selected Value in Javascript

In this post, I will share with you an example of how to check the radio button based on selected values using jquery. Maybe you have a task that needs to check the radio button on a selected value using a select box or even a button. To proceed kindly check the example code below.

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>How To Check Radio Button Based On Selected Value in jQuery?</title>
</head>
<body>
	<h1>How To Check Radio Button Based On Selected Value in jQuery?</h1>

	<form id="form1">
		
		
		<p><b>Membership Type</b></p>
		<select id="membership_type">
			<option value="">Select Membership Type</option>
			<option value="regular">Regular</option>
			<option value="pro">Pro</option>
			<option value="vip">VIP</option>
		</select>

		<p><b>Selected Membership</b></p>
		<input type="radio" value="regular" name="membership" class="membership" disabled="disabled"> Regular
		<input type="radio" value="pro" name="membership" class="membership" disabled="disabled"> Pro
		<input type="radio" value="vip" name="membership" class="membership" disabled="disabled"> VIP

		<br/><br/>

		<button type="button" id="btnSubmit">Submit</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() {

			$("#membership_type").on("change", function() {
				var membership = $(this).val();

				$(".membership[value='"+membership+"']").prop("checked", true);
			});

			// Method #1 - Getting radio selected using class
			$("#btnSubmit").on("click", function() {
				var membership = $(".membership:checked").val();

				alert(membership);
			});
		});
	</script>
</body>
</html>

 

Thanks for reading I hope it helps. Good luck, happy coding :)

Read next