用javascript更改onclick值

我对JS很新，也许这是一个非常平凡的问题，但我仍然无法弄清楚什么是错的。我有这个简单的HTML代码：用javascript更改onclick值

<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')" 
      } 
     } 
}

任何建议，我的代码是值得欢迎。

来源

2012-12-29 Ende Neu

在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); 
      } 
     } 
    }

来源

2012-12-29 19:34:44

如果我理解正确，onclick只接受函数作为值？ –

这是如何将侦听器添加到JS中按钮上的点击浏览器事件。分配给onclick属性的函数将在onclick触发时执行。 –

谢谢你的回答。 –

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

此代码结合的功能元件的onclick事件id为 '红色'。因此，添加一堆这样的条件，并改变onclick绑定，每当任何单选按钮被选中/取消选中。

来源

2012-12-29 19:15:37

解释？一个解释总是有助于更好的回答。 –

真的添加一些解释。 –

我想解释是onclick只接受函数作为参数，而我只是传递一个字符串。 –

用javascript更改onclick值

回答

相关问题