javascript - How to append selected item of several ASP.NetRadioButtonList and display within a html Div using Jquery? -
i have situation have 3 4 radiobuttonlist on web form , want display each selected items these radiobuttonlist within html div in format "a/b/c/d".
here a item of radiobuttonlist1, b of radiobuttonlist2, c of radiobuttonlist3 , d of radiobuttonlist4.
i able display selected items within html div, problem want display selected item on every click event of radiobuttonlist.
i.e. when select item radiobuttonlist1 "a" gets displayed within div, when select "b" item radiobuttonlist2 "a/b" gets displayed when select "c" radiobuttonlist3 "a/b/c" gets displayed. please guide me how can achieve this-
my aspx page-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $radbtn = $('#<%= radiobuttonlist1.clientid %> input:radio'); $('#<%= radiobuttonlist1.clientid %>').click(function () { var $radchecked = $('#<%= radiobuttonlist1.clientid %> input:checked'); $('#<%= radiobuttonlist2.clientid %>').click(function () { var $rad1checked = $('#<%= radiobuttonlist2.clientid %> input:checked'); $('#<%= radiobuttonlist3.clientid %>').click(function () { var $rad2checked = $('#<%= radiobuttonlist3.clientid %> input:checked'); $("#para").text('') .append($radchecked.next().text() + "/" + $rad1checked.next().text() + "/" + $rad2checked.next().text()); }); }); }); }); </script> <div class="smalldiv"> <asp:radiobuttonlist id="radiobuttonlist1" runat="server" repeatdirection="horizontal"> <asp:listitem>a1</asp:listitem> <asp:listitem>a2</asp:listitem> <asp:listitem>a3</asp:listitem> <asp:listitem>a4</asp:listitem> <asp:listitem>a5</asp:listitem> </asp:radiobuttonlist> <br /> <asp:radiobuttonlist id="radiobuttonlist2" runat="server" repeatdirection="horizontal"> <asp:listitem>b1</asp:listitem> <asp:listitem>b2</asp:listitem> <asp:listitem>b3</asp:listitem> <asp:listitem>b4</asp:listitem> <asp:listitem>b5</asp:listitem> </asp:radiobuttonlist> <br /> <asp:radiobuttonlist id="radiobuttonlist3" runat="server" repeatdirection="horizontal"> <asp:listitem>c1</asp:listitem> <asp:listitem>c2</asp:listitem> <asp:listitem>c3</asp:listitem> <asp:listitem>c4</asp:listitem> </asp:radiobuttonlist> <p id="para"> </p> </div>
Comments
Post a Comment