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

Question

I am new to using javascript and I am struggling with this set of radio buttons. What I would ultimately like to achieve is to have the images control the radio button (as they do) and populate different buttons with different links that lead to different product pages.

This is what I've come up with so far, but I can't figure out how to assign different urls because what I have is generating only one button with different labels.

Please help!

 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

When one of your radio buttons is clicked, this code will assign a value to the "choice1" button's data-url attribute.

When choice1 is clicked later, the url saved in its data-url attribute will be loaded into the current browser window.

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