在选择电台，重定向到一个链接

Posted 2023-05-07

【中文标题】在选择电台，重定向到一个链接

【英文标题】：on select radio, redirect to a link

【发布时间】：2012-01-30 16:14:43

【问题描述】：

我有三个收音机，我希望将任何人的 onselect 重定向到一个链接。使用 javascript 或 jquery

    All <input name="EventRadio" type="radio" value="" checked="checked"/>&nbsp;
    Events<input name="EventRadio" type="radio" value="Events" />&nbsp;Classes<input name="EventRadio" type="radio" value="Classes"/><br /><br />

因此，由于默认选中“全部”，我希望它转到 mysite.com/search.aspx。 现在如果用户选择事件，我想将用户重定向到 mysite.com/search?type=Events 或者如果用户选择类，我想将用户重定向到 mysite.com/search?type=Classes 作为对收音机的 onselect 的响应。我如何做到这一点？

【问题讨论】：

你为什么不把它们做成<a>标签而不是单选按钮？用户不希望单选按钮导致页面重新加载。

我同意 Pointy 的观点。你想要的可以实现，但我不确定你应该如何处理这种情况。

更好的选择是提取单选值，执行搜索，然后在您要重定向到的页面中显示结果。如果单选按钮导致页面加载，则用户需要等待页面加载完成才能完成搜索，或者重新输入搜索参数，除非您要将它们传递到新页面。这对我来说似乎很烦人。

【参考方案1】：

All     <input name="EventRadio" type="radio" value="" checked="checked" onclick ="goToLocation(this.value)"/>&nbsp;
Events  <input name="EventRadio" type="radio" value="Events" onclick ="goToLocation(this.value)"/>&nbsp;
Classes <input name="EventRadio" type="radio" value="Classes" onclick ="goToLocation(this.value)"/><br /><br />


function goToLocation(val)
 if(val == "Events")
     window.location = "go to Events location";
 if(val == "Classes")
     window.location = "go to Classes location";
window.location = "go to default location";

【参考方案2】：

作为演示：

var inputs = document.getElementsByTagName('input'),
    radios = [],
    output = document.getElementById('output'),
    url = 'mysite.com/search?type=';

for (var i = 0, len = inputs.length; i<len; i++) 
    if (inputs[i].type == 'radio')
        radios.push(inputs[i]);
    


for (var r=0, leng = radios.length; r<leng; r++)
    radios[r].onchange = function()
        if (this.value)
            /* in real life use:
            document.location = url + this.value;
            */
            output.innerhtml = url + this.value;
        
        else 
            /* in real life use:
            document.location = 'mysite.com/search?type=Events';
            */
            output.innerHTML = 'mysite.com/search.aspx';
        
    

JS Fiddle demo.

请注意，我还将您的标记更改为使用<label> 元素，并删除了 s 和<br />s。

【讨论】：

谢谢。现在我们可以将其存储为当前 URL 的值，而不是输出它吗？如果可以的话，它将解决我的问题，因为基本上我正在尝试获取查询字符串值并将其作为参数传递给 XSL！？

【参考方案3】：

$('input').click(function()
    var val = $(this).val();
    if(val !== '')
        window.location = 'http://mysite.com/search?type=' + val;
    else
        window.location = 'http://mysite.com/search.aspx';
    
);