javascript - 我想使用 javascript 将不同的 url 链接分配给激活单选按钮时生成的按钮

Question

我是使用 javascript 的新手，我正在为这组单选按钮而苦苦挣扎。我最终想要实现的是让图像控制单选按钮(就像它们所做的那样)并使用不同的链接填充不同的按钮，这些链接指向不同的产品页面。

这是我到目前为止的想法，但我不知道如何分配不同的 url，因为我所拥有的只是生成一个带有不同标签的按钮。

请帮忙!

function test() {
  var color = document.getElementsByName("place");

  
  var found = 1;
  for (var i = 0; i < color.length; i++) {
    if (color[i].checked) {
       document.getElementById("choice1").value  = color[i].value;
      found = 0;
      break;
    } else {
      found = 1;
    }
  }

 
  
  if (found == 1) {
    alert("Please Select Radio");
  } 
  
}

.vertical{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa0294cc83025dd2277db31/1520445774361/ccpop_orientation5.jpg);}
.horizontal{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa02946652dea43a4a1b63e/1520445768211/ccpop_orientation4.jpg);}





.selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.selector-2 input{
    position:absolute;
    z-index:999;
}

.selector-2 input:active +.orientation, .selector input:active +.orientation{opacity: .9;}
.selector-2 input:checked +.orientation, .selector input:checked +.orientation{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.orientation{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:120px;height:80px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.orientation:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}

<div class="selector">
	<input id="vertical" type="radio" name="place" value="vertical" onclick="test()"   style="border: none;">
	<label class="orientation vertical" for="vertical"></label>
	<input id="horizontal" type="radio" name="place" value="horizontal" onclick="test()" style="border: none;" >
	<label class="orientation horizontal" for="horizontal"></label>

</div>

<br>

<!-- BOTÃO DE CHECK -->


<br>
<input type="button" id="choice1">

Answer 1

当您的其中一个单选按钮被点击时，此代码将为“choice1”按钮的 data-url 属性分配一个值。

稍后点击choice1时，其data-url属性中保存的url会加载到当前浏览器窗口。

function test() {
  var color = document.getElementsByName("place");

  var found = 1;
  var btn = document.getElementById("choice1");

  for (var i = 0; i < color.length; i++) {
    if (color[i].checked) {
      btn.value = color[i].value;
      btn.dataset.url = "https://google.com/search?q=" + color[i].value;
      //btn.dataset.url = "/somepage?color=" + i + "&colorValue=" + color[i].value;
      found = 0;
      break;
    } else {
      found = 1;
    }
  }

 
  
  if (found == 1) {
    alert("Please Select Radio");
  } 
  
}

document.querySelector("#choice1").addEventListener('click', function () {
  if (this.dataset.url)
    window.location.href = this.dataset.url;
});

.vertical{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa0294cc83025dd2277db31/1520445774361/ccpop_orientation5.jpg);}
.horizontal{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa02946652dea43a4a1b63e/1520445768211/ccpop_orientation4.jpg);}





.selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.selector-2 input{
    position:absolute;
    z-index:999;
}

.selector-2 input:active +.orientation, .selector input:active +.orientation{opacity: .9;}
.selector-2 input:checked +.orientation, .selector input:checked +.orientation{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.orientation{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:120px;height:80px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.orientation:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}

<div class="selector">
	<input id="vertical" type="radio" name="place" value="vertical" onclick="test()"   style="border: none;">
	<label class="orientation vertical" for="vertical" onchange="window.location.replace('www.google.com')"></label>
	<input id="horizontal" type="radio" name="place" value="horizontal" onclick="test()" style="border: none;" >
	<label class="orientation horizontal" for="horizontal"></label>

</div>

<br>

<!-- BOTÃO DE CHECK -->


<br>
<input type="button" id="choice1">