JQuery Get selected value of radio button

This article shows you the way of getting selected value of radio button in JQuery which is JavaScript library helps us write less, do more.

Before approach this method, please take a look about the way how to get selected value of radio button using JavaScript posted by Mr Hoan with the title : JavaScript Get Radio Button Value

In this article, we do the similar example with Hoan’s article.

1. Design list of radio buttons in HTML as below

<form id="myForm" runat="server">
    <div id="divSport">
       <input id="rdoSport1" type="radio" name="Sport" value="Football" /> Football
       <input id="rdoSport2" type="radio" name="Sport" value="Tennis" /> Tennis
       <input id="rdoSport3" type="radio" name="Sport" value="Volleyball" /> Volleyball
    </div>
    <input type="button" id="btnSubmit" value="Submit"/>
</form>

2. Using JQuery to get selected value of radio button

 <script language="javascript">
     $(document).ready(function() {
     $("#btnSubmit").click(function() {                 
             var selected = $("#divSport input[type='radio']:checked");
             if (selected != "undefined" && selected.length > 0) {
                 selectedValue = selected.val();
                 alert("Selected value : " + selectedValue);
             }
             else {
                 alert("Please select a kind of sport!");
             }
         });
     });                  
 </script>

3. The key point of this method is this code line:

       $("input[name='radioname']:checked").val();

[download id=”2″ format=”1″]

Feb 14, 2012quynhnguyen

quynhnguyen

9 years ago JavascriptJavaScript, JQuery296