使用 javascript 更改 onclick 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14084951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change an onclick value with javascript
提问by Ende Neu
I'm pretty new to JS and maybe this is a very banal questions but I still can't figure out what's wrong. I have this simple html code:
我对 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=""/>
What i would like to achieve is, based on the radio checked change the onclick property. For example, if check1 and check2 are checked go to google.com, if check1 and check3 go to jsfiddle.net etcetera. So I wrote a simple Javascript:
我想要实现的是，基于无线电检查更改 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')"
}
}
HereYou can find a JS Fiddle. What I thought to do was to set the onclick property like I did with an image, using getElementById and then setting his source, so I wrote document.getElementById('red').onclick="window.open('random page')" but for some reason that I can't understand it doesn't work.
在这里你可以找到一个 JS Fiddle。我想做的是像处理图像一样设置 onclick 属性，使用 getElementById 然后设置他的源，所以我写了 document.getElementById('red').onclick="window.open('random page') “但出于某种我无法理解的原因，它不起作用。
Questions:
问题：
1) As you can see in my code i wrote a location.href='address' that obviously doen't wait for the user to click the button, so that's not a solution, how can I make this work?
1) 正如你在我的代码中看到的，我写了一个 location.href='address' 显然不等待用户点击按钮，所以这不是一个解决方案，我怎样才能做到这一点？
2)Is there a way to make this piece of code more scalable? What I mean is, in the future if I want to add another radio, I would have to modify manually the code and insert another else if, I thought about something like:
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')"
}
}
}
Any suggestion to my code is welcome.
欢迎对我的代码提出任何建议。
?
?
采纳答案by Matyas Matyas
Try out this in JS Fiddle. It contains how you can listen the onclick event of a button and to get the checked value of a radio button.
在 JS Fiddle 中试试这个。它包含如何监听按钮的 onclick 事件并获取单选按钮的选中值。
HTML part:
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 part:
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.');
}
}
If you use radio buttons, and you want only one to be selectable to the user at a time you have to set the same name attribute to them.
如果您使用单选按钮，并且您希望用户一次只能选择一个按钮，则必须为它们设置相同的名称属性。
You can also make use of the value property of radio buttons for storing the redirection URL.
您还可以使用单选按钮的 value 属性来存储重定向 URL。
Here is a more useful example for you.
这里有一个更有用的例子。
HTML part:
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 part:
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);
}
}
}
回答by Yash Singla
if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
document.getElementById('red').onclick=function(){
window.location.href ='http://www.google.com';
};
}
This code binds the function to the onclick event of element with id='red'. So add a bunch of such conditions and change the onclick binding whenever any radio button is checked/unchecked.
此代码将函数绑定到 id='red' 元素的 onclick 事件。所以添加一堆这样的条件并在选中/取消选中任何单选按钮时更改 onclick 绑定。
