Изменения HREF значения при выборе радиокнопки с помощью переключателя заявления

Question

Попытки изменить 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

Answer 1

You» re, используя JQuery, но не связать его.
Настройки -> JavaScript
Добавить эту ссылку в https://code.jquery.com/jquery-3.1.0.min.js.

Answer 2

Вы можете просто использовать
$("#shopCart").attr("href","http://yahoo.com");
и так далее ..

Answer 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()]); 
}); 

Я использовал значение, чтобы указать, какой элемент массива, который я хотел занять место ссылки.

Это более СУХОЕ и менее избыточное, чем ваш код.