JavaScript radio按鈕選中值

antzone發表於2017-03-17
JavaScript

單選按鈕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(){
  let obox=document.getElementById("box");
  let oshow=document.getElementById("show");
  radios=box.getElementsByTagName("input");
  for(let i=0;i<radios.length;i++){
    if(radios[i].checked){
      oshow.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中，程式碼比較簡單不多介紹。

相關文章