原生js獲取radio按鈕選中值程式碼

antzone發表於2017-03-17
JS

單選按鈕radio是最為常用的表單元素之一通常情況下一組單選鈕只能夠選中一個，比如選擇性別的時候只能夠選擇男或者是女，不可能同時都能夠選中（雖然理論上有雙性人），下面通過程式碼例項介紹一下如何獲取選中按鈕的值。

程式碼如下:

[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 box=document.getElementById("box");
  var show=document.getElementById("show");
  radios=box.getElementsByTagName("input");
  for(var i=0;i<radios.length;i++)
  {
    if(radios[i].checked)
        {
      show.innerHTML = radios[i].value;
    }
  }
}
</script> 
</head> 
<body > 
<div id="show"></div>
<div id="box">
  <input type="radio" value="boy"/>男
  <input type="radio" value="girl" checked />女
</div>
</body> 
</html>

以上程式碼可以將選中的單選按鈕值寫入一個div中，程式碼比較簡單這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

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

相關文章