js如何獲取選中radio單選按鈕的值

antzone發表於2017-03-15
JS

radio單選按鈕在是非常常用的表單元素之一，經常需要獲取被選中按鈕的value屬性值，下面就通過例項簡單介紹一下如何使用javascript實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  radios=obox.getElementsByTagName("input");
  var bt=document.getElementById("bt");
  bt.onclick=function(){
    for(var i=0;i<radios.length;i++){
      if(radios[i].checked==true){
         alert(radios[i].value);
      }
    }
  }
}
</script>
</head>
<body>
<div id="box">
  <input type="radio" name="ra" value="1"/>
  <input type="radio" name="ra" value="2"/>
  <input type="radio" name="ra" value="3"/>
  <input type="radio" name="ra" value="4"/>
  <input type="radio" name="ra" value="5"/>
</div>
<input type="button" id="bt" value="點選檢視結果" />
</body>
</html>

以上程式碼當點選按鈕的時候可以彈出選中的單選按鈕的value屬性值，程式碼非常的簡單下面簡單介紹一下實現過程。

一.實現原理:

通過getElementsByTagName()函式獲取div下的input元素物件，在本程式碼中也就是單選按鈕，然後用for迴圈遍歷每一個按鈕，並且判斷當前單選按鈕的checked屬性值是否為true，如果為tue就是選中，然後彈出value屬性值，大體如此。

二.相關閱讀:

1.window.onload可以參閱window.onload用法詳解一章節。

2.getElementById()函式可以參閱document.getElementById()一章節。 

3.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。 

4.onclick事件可以參閱javascript click 事件一章節。 

相關文章