使用按钮单击重定向到所选单选按钮上的不同页面答案

【问题标题】：redirect to different pages on selected radio button using button click使用按钮单击重定向到所选单选按钮上的不同页面
【发布时间】：2014-01-09 16:00:35
【问题描述】：

下图是一个弹出窗口，详细说明了风险警告，然后要求用户选择两个单选按钮之一。单击“我同意”（提交）按钮时，它应该根据选择的单选按钮重定向到不同的页面。提交按钮有一个 jquery 类。有人可以用 jquery 代码帮助我检查选择了哪个单选按钮并重定向到不同的页面吗？

html如下，

    <div id="mask">
    </div>
    <!-- create white empty box -->
    <div id="boxes" class="bodytext">
        <!-- things that go in the box -->
        <div id="dialog" class="window">
           <strong>Disclaimer and Risk Warnings</strong>
            <br />
            <br />
            <div class="bodytext" style="overflow: auto; height: 160px; width: 500px;      border: activeborder 1px solid;">                   
            </div>
            <br/>
            <strong> Please select the user type that applies to you</strong>
            <br/>               
            <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem>Private Clients</asp:ListItem>  
            <asp:ListItem>Professional Intermediaries</asp:ListItem>  
            </asp:RadioButtonList>             

            <p>
                <input id="AcceptButton" type="button" value="I Agree" class="close"  style="margin-left: 215px" />
            </p>
        </div>
    </div>

jquery 类在下面

              $('.window .close').click(function (e) {

                $.cookie("CamSession1", "CAM");                   
                if ($('#Private Clients').is(':checked')) {
                    window.location.replace("http://stackoverflow.com");
                }
                else if ($('#Professional Intermediaries').is(':checked')) {
                    window.location.replace("http://exchange.com");
                }
                e.preventDefault();
                $('#mask').hide();
                $('.window').hide();
            });

【问题讨论】：

发布 RadioButtonList 的渲染 html
你为什么使用 runat server 单选按钮？
没有特别的原因，我想我会在后面的代码上做重定向。但它已经有一个 jquery 类来隐藏它在弹出之前创建的掩码，所以我正在考虑在 jquery 类本身中添加重定向。我应该改用输入类型收音机吗？
是的，你应该这样做。因为你不需要运行服务器控制。

标签： javascript jquery html asp.net

【解决方案1】：

试试这个

HTML

<div id="mask">
    </div>
    <!-- create white empty box -->
    <div id="boxes" class="bodytext">
        <!-- things that go in the box -->
        <div id="dialog" class="window">
           <strong>Disclaimer and Risk Warnings</strong>
            <br />
            <br />
            <div class="bodytext" style="overflow: auto; height: 160px; width: 500px;      border: activeborder 1px solid;">                   
            </div>
            <br/>
            <strong> Please select the user type that applies to you</strong>
            <br/>               
            <input type="radio" name="rdotnc" id="rdo1" />Private Clients
            <input type="radio" name="rdotnc" id="rdo2"/>Professional Intermediaries
            </asp:RadioButtonList>             

            <p>
                <input id="AcceptButton" type="button" value="I Agree" class="close"  style="margin-left: 215px" />
            </p>
        </div>
    </div>

Javascript

$('.window .close').click(function (e) {
                //$.cookie("CamSession1", "CAM");  
                if ($('#rdo1').is(':checked')) {
                    window.location.replace("http://www.stackoverflow.com");
                }
                else if ($('#rdo2').is(':checked')) {
                    window.location.replace("http://www.exchange.com");
                }
                $('#mask').hide();
                $('.window').hide();
            });

检查小提琴here

【讨论】：