不能使用運行JavaScript的HTML單選按鈕

Question

我在<頭「有此腳本：

<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> 

但沒有警報的工作。我在控制檯中沒有錯誤。請幫忙。

Answer 1

您正在解析單選按鈕的HTML代碼之前正在運行腳本。

將表格下面的腳本，或運行在加載事件代碼：

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

}; 

Answer 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/

Answer 3

第一個加法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); 
          }; 
         } 
    }); 
    }); 

Answer 4

在表單之後移動它的腳本。 在瀏覽器解析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>