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フィドルがあります。私がやろうと思ったのは、画像の場合と同じように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

JSFiddleでこれを試してください。ボタンの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.');
       }
   }

ラジオボタンを使用していて、一度に1つだけをユーザーが選択できるようにする場合は、同じ名前属性をボタンに設定する必要があります。

ラジオボタンの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 に答える