0

< head > に次のスクリプトがあります。

<script>
var rad = document.getElementsByName('search_type');
alert(rad[1]);
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
        alert(this.value);
    };
}
</script>

これが私のフォームです： 

<form name="search_form" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
    <table border="0"> 
        <tr>
            <td class="input">
                <input type="radio" name="search_type" value="search_code" checked>1st type<br>
                <input type="radio" name="search_type" value="search_title">2nd type<br>
                <input type="radio" name="search_type" value="search_filter">3rd type<br>
            </td>
        <tr/>
    </table> 
</form>

しかし、アラートはどれも機能しません。コンソールにエラーはありません。助けてください。

4

4 に答える 4

4

ラジオ ボタンの HTML コードが解析される前にスクリプトを実行しています。

フォームの下にスクリプトを配置するか、load イベントでコードを実行します。

window.onload = function() {

  var rad = document.getElementsByName('search_type');
  alert(rad[1]);
  var prev = null;
  for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
      (prev)? console.log(prev.value):null;
      if(this !== prev) {
        prev = this;
      }
      console.log(this.value)
      alert(this.value);
    };
  }

};
于 2012-11-27T08:05:02.587 に答える
2

jQuery を使用してコードを簡素化できます。

$(document).ready(function() {
    var rad = $('[name="search_type"]');
    console.log(rad);
    var prev = null;
    rad.click(function() {
        console.log(prev, $(this).is(':checked'));
        if (this !== prev) {
            prev = this;
        }
        console.log(prev, $(this).is(':checked'));
    });
});

http://jsfiddle.net/f2aDK/

于 2012-11-27T08:12:18.277 に答える
2

フォームの後にスクリプトを移動します。ブラウザーが DOM 要素を解析するまで、javascript は DOM を読み取ることができません。

<form name="search_form" action="<?php echo $_SERVER['PHP_SELF']?>" method="post"> 
    <table border="0"> 
        <tr>
            <td class="input">
                <input type="radio" name="search_type" value="search_code" checked>1st type<br>
                <input type="radio" name="search_type" value="search_title">2nd type<br>
                <input type="radio" name="search_type" value="search_filter">3rd type<br>
            </td>
        <tr/>
    </table> 
</form>

<script>
var rad = document.getElementsByName('search_type');
alert(rad[1]);
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
        alert(this.value);
    };
}
</script>
于 2012-11-27T08:25:03.940 に答える
0

最初にjquery libを追加します 

 $(document).ready(function () {
             $('[name="search_type"]').live('click', function (event) {
                     var rad = document.getElementsByName('search_type');
                        alert(rad[1]);
                       var prev = null;
                       for (var i = 0; i < rad.length; i++) {
                           rad[i].onclick = function() { 
                               (prev)? console.log(prev.value):null;
                               if(this !== prev) {
                                prev = this;
                                }
                              console.log(this.value)
                              alert(this.value);
                            };
                        }
    });
    });
于 2012-11-27T08:15:31.100 に答える