Radio button selection on jquery tabs label click

Question

I had a simple working (ASP.NET) Scenario here: 3 asp:RadioButtons that each have OnCheckedChanged event that will update an asp:gridview.

But now, I want to put some description for each radiobutton selection,and I thought it would be a good idea to embed them in JQuery UI Tabs like the following :

<div id="tabs">
<ul>
  <li><a href="#tabs-1"> 
       <asp:RadioButton  ID="RadioButton1" runat="server" Text="option1"  Checked="True"
        AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /> </a></li>
  <li><a href="#tabs-2">
       <asp:RadioButton ID="RadioButton2" runat="server" Text="option2"
        AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
  <li><a href="#tabs-3">
       <asp:RadioButton  ID="RadioButton3" runat="server" Text="option3"
       AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
 </ul>
 <div id="tabs-1"> <p>  content1</p>   </div>
 <div id="tabs-2"> <p>  content2</p>   </div>
 <div id="tabs-3"> <p>  content3</p>   </div>
 </div>

and the jquery is

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>

I want the corresponding radiobuttons for each tabs be selected after switching to that tab (by clicking anywhere inside that tab) I don't know how to that probably by JQuery or JavaScript or any other kind suggestion. Please help me

Generated HTML source :

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
                        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">
                            <input type="radio" checked="checked" value="RadioButtonCart" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonCart"/><label for="ctl00_ContentPlaceHolder1_RadioButtonCart">option1</label></a></li>
                        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">
                            <span style="color: Green;"><input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonShetab\',\'\')', 0)" value="RadioButtonShetab" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonShetab"/><label for="ctl00_ContentPlaceHolder1_RadioButtonShetab">option2</label></span></a></li>
                        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">
                            <input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonFish\',\'\')', 0)" value="RadioButtonFish" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonFish"/><label for="ctl00_ContentPlaceHolder1_RadioButtonFish">option3</label></a></li>
                    </ul>
                    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                        <p>                               content1</p>
                    </div>
                    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <p>                              content2                            </p>

                    </div>
                    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
                        <p>                            content3                            </p>
                    </div>

                </div>

---

ok , thanks to CraigF helps I solved 2 problems with adding ids to anchors like id="tabsA-1" and simulating the postback for OnCheckedChanged="RadioButton_CheckedChanged" with $("#aspnetForm").submit();

    <script type="text/javascript">
    $(document).ready(function() {
        $("#tabsA-1").click(function() {
        $("#<%=RadioButtonCart.ClientID %>").attr("checked", "checked");
        $("#aspnetForm").submit();
        });
    }); 
</script>

I just have to find a way to select the right tab after postback and my problem is solved.

thanks to CraigF Again

here is the last piece to select the right tab with help of asp.net

  <script type="text/javascript">
    $(function() {
        var $tabs = $("#tabs").tabs();
        $tabs.tabs('select', '<%= selectedTabIndex %>');

    });
</script>

which selectedTabIndex is a public string var in code_behind and i update its value in page_load. one funny problem was that the .tabs( 'select' , index ) in JQuery is not zero-based index of the tab as the official site said and it start from 1.

Answer 1

Use JQuery to add a click event to the div's. Then simply write a function (Jquery) to reselect the radio button (which will trigger your server side callback for the radiobutton)