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

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 内执行此操作 ALL，还是应该在单击单选按钮时创建一个外部函数，它会设置一个变量，然后将该变量加载到"shoppingcart.html?value"?

Answer 1

您也可以这样做：

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

是的，您可以在按钮的 onclick 内完成所有操作（没有 jQuery）：

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

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

此外，您可以保留window.location 的href 部分，因为两者的工作方式相同。

最后，请注意几周后有一种新方法（我目前不推荐它，因为它太新了）：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

是的，完全有可能。您可以通过执行以下操作在 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。

Answer 4

只需获取单选值并将其添加到 url：

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