Question

我在这里有一个简单的工作（ASP.NET）场景： 3 asp：RadioButtons，每个都有OnCheckedChanged事件，将更新asp：gridview。

但是现在，我想为每个radiobutton选择添加一些描述，我认为将它们嵌入JQuery UI标签中是个好主意，如下所示：

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

，jquery是

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

我想在切换到该标签后选择每个标签的相应单选按钮（通过点击该标签内的任意位置）我不知道如何通过JQuery或JavaScript或任何其他类型的建议。请帮帮我

生成的HTML源：

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

好的，感谢CraigF帮助我解决了添加的2个问题 ids到像id =“tabsA-1”这样的锚点，并使用$（“＃aspnetForm”）模拟OnCheckedChanged =“RadioButton_CheckedChanged”的回发.subs（）;

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

我只需找到一种方法在回发后选择正确的标签，我的问题就解决了。

感谢CraigF Again

这是在asp.net

的帮助下选择正确选项卡的最后一部分

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

    });
</script>

selectedTabIndex是code_behind中的公共字符串var，我在page_load中更新其值。一个有趣的问题是，JQuery 中的.tabs（'select'，index）不是基于零的标签，正如官方网站所说的那样，它从1开始。

Answer 1

使用JQuery向div添加click事件。然后简单地编写一个函数（Jquery）来重新选择单选按钮（这将触发你对无线电按钮的服务器端回调）

jquery选项卡上的单选按钮选择标签单击

感谢CraigF Again

1 个答案: