用javascript更改onclick值

Question

我對JS很新，也許這是一個非常平凡的問題，但我仍然無法弄清楚什麼是錯的。我有這個簡單的HTML代碼：

<span>1</span> 
<input id="check1" type="radio" value="a1"/> 
<span>2</span> 
<input id="check2" type="radio" value="b2"/> 
<span>3</span> 
<input id="check3" type="radio" value="c3"/> 
<span>4</span> 
<input id="check4" type="radio" value="a4"/> 
<span>5</span> 
<input id="check5" type="radio" value="b5"/> 

<input id="red" type="button" value="Go" onclick=""/> 

我想實現的是，基於收音機檢查更改onclick屬性。 例如，如果選中check1和check2，請轉到google.com，如果check1和check3轉到jsfiddle.net等等。所以我寫了一個簡單的JavaScript：

window.onchange = function redirect(){ 

    if (document.getElementById('check1').checked && document.getElementById('check2').checked) { 
    location.href='www.google.com'; 
    // document.getElementById('red').onclick="www.google.com" 
    } 

    else if (document.getElementById('check1').checked && document.getElementById('check3').checked) { 
    location.href='www.jsfiddle.net'; 
    // document.getElementById('red').onclick="window.open('www.jsfiddle.net')" 
    } 
} 

Here你可以找到一個JS提琴。 我想要做的就是像使用圖像一樣設置onclick屬性，使用getElementById然後設置源代碼，所以我寫了document.getElementById（'red'）。onclick =「window.open（'random page' ）「但由於某些原因，我無法理解它不起作用。

問題：

1）你可以在我的代碼看，我寫了一個location.href =「地址」這顯然doen't等待用戶點擊該按鈕，所以這不是一個解決方案，我該如何做這項工作？

2）有沒有辦法讓這段代碼更具擴展性？我的意思是，在未來，如果我想添加另一個電臺，我必須手動修改代碼，並插入另一否則如果，我想到是這樣的：

var radio = document.getElementByName('radio') //not sure if this is the right getElement 
for (var i=1; i<radio.lenght; i++){ 
    if radio[i].checked{ //is this right? 
     for (var n=i+1; n<radio.lenght; n++){ 
      if radio[n].checked{ 
      document.getElementById('red').onclick="window.open('random page')" 
      } 
     } 
} 

任何建議，我的代碼是值得歡迎。

Answer 1

在JS小提琴中嘗試一下。它包含了如何聆聽按鈕的onclick事件並獲取單選按鈕的選中值。

HTML部分：

<form action=""> 
    <input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br> 
    <input type="radio" name="vehicle" value="No" id='no'>No 
    </form> 
    <input id="red" type="button" value="let's go"/> 

JS部分：

document.getElementById('red').onclick = function() { 
     if (document.getElementById('yes').checked) { 
      alert('I have a Vehicle.'); 
     } else if(document.getElementById('no').checked) { 
      alert('I don\'t have a Vehicle.'); 
     } else { 
      alert('No answer.'); 
     } 
    } 

如果您使用單選按鈕，而你只想要一個可以進行選擇，以同時用戶必須設置相同名稱屬性給他們。

您還可以使用單選按鈕的value屬性來存儲重定向URL。

這是一個更有用的例子。

HTML部分：

<form action=""> 
     <input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br /> 
     <input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br /> 
     <input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook 
    </form> 

    <input id="red" type="button" value="let's go"/> 

JS部分：

document.getElementById('red').onclick = function() { 
     var options = document.getElementsByName('redirect'), 
      length = options.length, 
      i = 0; 

     for (i; i < length; i++) { 
      if (options[i].checked) { 
       window.open(options[i].value); 
      } 
     } 
    } 

Answer 2

if (document.getElementById('check1').checked&&document.getElementById('check2').checked) 
{ 
    document.getElementById('red').onclick=function(){ 
     window.location.href ='http://www.google.com'; 
    }; 
} 

此代碼結合的功能元件的onclick事件id爲 '紅色'。因此，添加一堆這樣的條件，並改變onclick綁定，每當任何單選按鈕被選中/取消選中。