Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-check-radio-button-based-on-selected-value-in-javascriptjquery
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
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>
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-check-radio-button-based-on-selected-value-in-javascriptjquery if you want to download this code.
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
Happy coding :)
Top comments (0)