Question

我有一组单选按钮：

<input type="radio" name="product" value="Apple"/>
<input type="radio" name="product" value="Orange"/>
<input type="radio" name="product" value="Grape"/>

下面的两个按钮会将用户带到不同的位置

<button type="button" id="ButtonHERE">CLICK TO GO HERE</button>
<button type="button" id="ButtonTHERE">CLICK TO GO THERE</button>

我想在ButtonTHERE上放置一个onclick函数，这样当它被点击时，它会触发window.location.href函数并转到"shoppingcart.html?value"，其中 value 是所选的值单选按钮。

我可以在按钮的onclick内执行此所有，还是应该在单击单选按钮时创建外部函数，它会设置一个变量，然后将该变量加载到"shoppingcart.html?value"？

Answer 1

只需获取无线电值并将其添加到网址：

document.getElementById('ButtonTHERE').onclick = function () {
    var val = document.getElementsByName('product')[0].value;
    window.location = "shoppingcart.html?" + val;
};

Answer 2

是的，你可以在按钮（没有jQuery）的内容中这个ALL：

＆＃13;
＆＃13;
<input type="radio" name="product" value="Apple"/> <input type="radio" name="product" value="Orange"/> <input type="radio" name="product" value="Grape"/> <button type="button" id="ButtonHERE">CLICK TO GO HERE</button> <button type="button" id="ButtonTHERE" onclick=" var elm=document.querySelector('input[name=\'product\']:checked'); if(elm) window.location.href='shoppingcart.html%3F' + elm.value; ">CLICK TO GO THERE</button>
＆＃13;
＆＃13;
＆＃13;

你想要checked单选按钮：避免编码循环（旧方法）或一堆嵌套if（或三元组）这是现代的和正确的这样做的方法（在幕后，这仍然使用一个艰难的循环） %3F是?的网址编码请注意，您可能还需要对值进行转义/ url编码（取决于使用的字符）！可能没有选择单选按钮（当前示例中有可能），然后querySelector('input[name=\'product\']:checked')将返回null。所以我们用if捕获它，并且仅当用户选择了一个单选按钮时才重定向（如果你有一个用户只能更改的默认选择，你可以省略该检查，从而保证有一个选定的单选按钮）。

另外，您可以离开href window.location部分，因为两者都是一样的。

最后，请注意，自从几周以来有一种新的方式（我目前还不会推荐它，因为它是如此新颖）：RadioNodeList。<登记/> 如果您的单选按钮位于表单中，则可以抓取表单（在此示例中为elm_form）并执行：

elm_form.elements['product'].value

获取选中的值。

PS：最好使用javascript挂钩函数（在这方面你的问题有点模糊）：

document.getElementById('ButtonTHERE').onclick=function(){ var elm=document.querySelector('input[name="product"]:checked'); if(elm) window.location='shoppingcart.html%3F' + elm.value; };

Answer 3

你也可以这样做：

<input id="asd" type="radio" name="product" value="Apple"/>
<input id="asd" type="radio" name="product" value="Orange"/>
<input id="asd" type="radio" name="product" value="Grape"/>

<button type="button" id="ButtonHERE" 
onclick="window.location.href=('shoppingcart.html?'+(document.getElementsByName('product')[0].checked?document.getElementsByName('product')[0].value:document.getElementsByName('product')[1].checked?document.getElementsByName('product')[1].value:document.getElementsByName('product')[2].value))">CLICK TO GO HERE</button>
<button type="button" id="ButtonTHERE" 
onclick="alert('shoppingcart.html?'+(document.getElementsByName('product')[0].checked?document.getElementsByName('product')[0].value:document.getElementsByName('product')[1].checked?document.getElementsByName('product')[1].value:document.getElementsByName('product')[2].value))">CLICK TO SEE GENERATED LINK</button>

Answer 4

是的，完全有可能。您可以通过执行以下操作在onclick事件中编写Javascript：

<button type="button" id="ButtonTHERE" onclick="javascript:window.location.href=('shoppingcart.html?'+document.querySelector('input[type=\'radio\'].product:checked').value)"> CLICK TO GO THERE </button>

通过添加javascript :,您可以在活动中执行常规的JavaScript。

Window.Location.Href =由所选单选按钮值设置的变量

4 个答案: