Radio Button Selection On Jquery Tabs Label Click

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

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>

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.

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