Javascript onclick event to get read HTML input radio button list Selected Value Selected Text C# VB.Net

Using Javascript to get the HTML Input Type Radio Button List Selected Value & Selected Text is not an easy job like other HTML controls. To get the Selected Value & Selected Text from HTML Input Type Radio Button List you have to iterate through all the radio buttons in that set and then read the value for checked radio button.In this post i will try to give you a complete example on how we can read Selected Value or Selected Text from HTML input type=”radio”.


To Do the Example Prepare HTML Input Radio Like Below:

<b>Javascript onclick Event to get HTML Input Radio Button List Selected Value Selected Text:</b>
<hr />

<input type="radio" name="Category" value="1" checked="checked" onclick="GetHTMLRadioButtonSelectedValue();"/><label>Cosmetics</label><br/>
<input type="radio" name="Category" value="2" onclick="GetHTMLRadioButtonSelectedValue();"/><label>Perfume</label><br/>
<input type="radio" name="Category" value="3" onclick="GetHTMLRadioButtonSelectedValue();"/><label>Beauty Soap</label><br/>
<input type="radio" name="Category" value="4" onclick="GetHTMLRadioButtonSelectedValue();"/><label>Sunglasses</label><br/>

<br />

<asp:Label runat="server" ID="lblHTMLradiobuttonValue"></asp:Label>

Note: To run the example copy the above code snippet exactly. Otherwise Javascript function won’t work. Specially wrap the Radio Button Caption Text by <label> as mentioned above.

Javascript Function Code:

<script type="text/javascript">

    function GetHTMLRadioButtonSelectedValue() {
        var HTMLRadio = document.forms[0].Category;

        for (var i = 0; i < HTMLRadio.length; i++) {

            if (HTMLRadio[i].checked) {
                var lblHTMLradiobuttonValue = document.getElementById('<%= lblHTMLradiobuttonValue.ClientID %>');
                lblHTMLradiobuttonValue.innerHTML = '<b>Selected Value:</b> ' + HTMLRadio[i].value + '<br/>';

                lblHTMLradiobuttonValue.innerHTML += '<b>Selected Text:</b> ' + HTMLRadio[i].parentNode.getElementsByTagName('label')[i].innerHTML;
            } // end if

        } // end for

    } // end function


Note: All code examples same for both C# & VB.Net.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code