1

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

在这里你可以找到一个 JS Fiddle。我想做的是像处理图像一样设置 onclick 属性，使用 getElementById 然后设置他的源，所以我写了 document.getElementById('red').onclick="window.open('random page') “但由于某种我无法理解的原因，它不起作用。

问题：

1）正如您在我的代码中看到的那样，我写了一个 location.href='address' 显然不等待用户单击按钮，所以这不是一个解决方案，我怎样才能使它工作？

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

欢迎对我的代码提出任何建议。

​</p>

4

2 回答 2

1

在 JS Fiddle 中试试这个。它包含如何监听按钮的 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-29T19:34:44.213 回答
0 
if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
    document.getElementById('red').onclick=function(){
      window.location.href ='http://www.google.com';
     };
}

此代码将函数绑定到 id='red' 元素的 onclick 事件。因此，只要选中/取消选中任何单选按钮，就添加一堆这样的条件并更改 onclick 绑定。

于 2012-12-29T19:15:37.043 回答