By 10/02/2014 11 Comments

How To Display Text and Value of Multiple RadioButtonList using jQuery

RadioButtonList

  • It is an asp.net control which renders the list of radio buttons as a standards html on browser
  • Radio buttons lets give users to select a single choice at a time e.g (Male or Female)

Following example display the text and value of the multiple selected radio button from multiple  radiobutton list 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

            $('[id$="TT_Checkbutton"]').click(function (e) {  // get button object, trigger it's click event and call anonymous function

                e.preventDefault();
                var $selected = $('table.tbl :radio:checked'); // get all checked radio buttons inside the table and assign into $selected variable
                $("#TT_paragraph").text(''); // text() method set text for selected object, here it will be set as an empty string

                $selected.each(function () { // each(), which specifies the method for each checked radio buttons and execute

                    var $sel = $(this); // assign checked radio buttons into $sel
                    $("#TT_paragraph")
                    .append("<b>Index: </b>" +
                    $sel.val() + "<br/>") // append the text and value of checked radio buttons into paragraph using append(), next and text() method

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

                });

            });

        });

    </script>

ASP.NET Code snippet

<h2>How To Display Text and Value of Multiple RadioButtonList using jQuery</h2><br />
<!--- Following code renders the radio button lists, label and a button on browser --->

        <asp:Label runat="server" Text="Select a Radio Button From Each of these lists and click the Button"></asp:Label>
        <br/> <br/>
        Most like site: 
        <asp:RadioButtonList ID="TT_radiobtnList1" 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 />
        I am a: <br />
        <asp:RadioButtonList ID="TT_radiobtnList2" runat="server" class="tbl">
        <asp:ListItem Text=".Net Developer" Value="3"></asp:ListItem>
        <asp:ListItem Text="PHP Developer" Value="4"></asp:ListItem>
        <asp:ListItem Text="Java Developer" Value="5"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        I visit your sites : <br />
        <asp:RadioButtonList ID="TT_radiobtnList3" runat="server" class="tbl">
        <asp:ListItem Text="2-3 times a week" Value="6"></asp:ListItem>
        <asp:ListItem Text="Once a Month" Value="7"></asp:ListItem>
        <asp:ListItem Text="None of the above" Value="8"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <asp:Button ID="TT_Checkbutton" runat="server" Text="Scroll"/>

        <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 .