By 10/02/2014 7 Comments

How To Display Text and Value of the Selected RadioButton using jQuery

Radio Button List control in asp.net

  • Radio button list control is a list of standard html radio buttons
  • It is used for selected one or single choice at a time by user e.g(Male or Female)

 

Following example displays the text and value of the selected radio button in asp.net using JQuery

jQuery Code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            var $radBtn = $("table.tbl input:radio"); // get radio button object

            $radBtn.click(function () { // trigger an click event by radio button,called unknown function

                var $radChecked = $(':radio:checked'); // assign checked radio objects into $redChecked

                $("#TT-paragraph").text('') // text() method set text for selected object, here it will be set as an empty string

                .append("<b>Index: </b>" +
                $radChecked.val() + "<br/>") // append the text and value of checked radio buttons into paragraph using append(), next and text() method

                .append("<b>Value: </b>" +
                $radChecked.next().text());

            });

        });

    </script>

ASP.NET Code snippet

<h2>How To Display Text and Value of the Selected RadioButton using jQuery</h2><br />

<!--- Following code renders the radio buttons and a label control on browser --->
        <asp:Label runat="server" Text="Select a RadioButton to display its Text and Value"></asp:Label>
        <br/> <br/>
        <asp:RadioButtonList ID="TT_radiobtnList" runat="server" class="tbl">
        <asp:ListItem Text="google.com" Value="0"></asp:ListItem>
        <asp:ListItem Text="bing.com" Value="1"></asp:ListItem>
        <asp:ListItem Text="yahoo.com" Value="2"></asp:ListItem>
        </asp:RadioButtonList>

        <br /><br />
        <p id="TT-paragraph"></p>






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .