【问题标题】：Change href value when selecting radiobutton using a switch statement使用 switch 语句选择单选按钮时更改 href 值
【发布时间】：2016-08-15 00:52:06
【问题描述】：

尝试根据选择的单选按钮更改语句中的 href 引用

        <ul class="size_selector">
                        <li class="top"><input type="radio" class="radioselect" name="id" id="test1" value="test1" /><label for="test1">1</label></li>
                        <li class="top"><input type="radio" class="radioselect" name="id" id="test2" value="test2"/> <label for="test2">2</label></li>
                        <li class="top"><input type="radio" class="radioselect" name="id" id="test3" value="test3"/> <label for="test3">3</label></li>
                        <li class="top"><input type="radio" class="radioselect" name="id" id="test4" value="test4"/> <label for="test4">4</label></li>
        </ul>
<a id="shopCart" href="#">
    Take me to your leader
</a>

jQuery

$("input[type='radio']").change(function(){

switch($(this).val()) {
  case "test1" :
    document.getElementById("shopCart").href="http://yahoo.com"; 
    break;
  case "test2" :
    document.getElementById("shopCart").href="http://bing.com"; 
    break;
  case "test3" :
    document.getElementById("shopCart").href="http://google.com"; 
     break;
  case "test4" :    document.getElementById("shopCart").href="http://stackoverflow.com";
    break;
  };

});

http://codepen.io/homogenizer/pen/xOrzgZ

【问题讨论】：

标签： javascript jquery input switch-statement href

【解决方案1】：

您正在使用 JQuery，但没有链接它。
设置 -> JavaScript
将此链接添加到https://code.jquery.com/jquery-3.1.0.min.js。

【讨论】：

【解决方案2】：

你可以简单地使用
$("#shopCart").attr("href","http://yahoo.com");
等等..

【讨论】：

你的意思是document.getElementById("shopCart").href="http://yahoo.com";可以换成$("#shopCart").attr("href","http://yahoo.com");
完全正确.. :) 确保您使用的是 jQuery

【解决方案3】：

如果您将输入的值更改为 [0,1,2,3]，您可以将链接放入一个数组中并一起摆脱 switch 语句并简化您的代码。

HTML

<ul class="size_selector">
    <li class="top"><input type="radio" class="radioselect" name="id" id="test1" value="0" /><label for="test1">1</label></li>
    <li class="top"><input type="radio" class="radioselect" name="id" id="test2" value="1"/> <label for="test2">2</label></li>
    <li class="top"><input type="radio" class="radioselect" name="id" id="test3" value="2"/> <label for="test3">3</label></li>
    <li class="top"><input type="radio" class="radioselect" name="id" id="test4" value="3"/> <label for="test4">4</label></li>
</ul>
<a id="shopCart" href="#">
    Take me to your leader
</a>

JavaScript

var links = ["http://yahoo.com", "http://bing.com", "http://google.com", "http://stackoverflow.com"]

$("input[type='radio']").change(function(){
    $("#shopCart").attr("href", links[$(this).val()]);
});

我使用该值来指定要替换链接的数组元素。

这比你的代码更干，冗余更少。

【讨论】：