Posted on Mar 23, 2022 • Edited on May 1, 2023

How To Check Radio Button Based On Selected Value in Javascript/jQuery?

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>