JavaScript獲取選中checkbox核取方塊值

螞蟻小編發表於2018-02-09
JavaScript

checkbox核取方塊是非常重要的表單元素，場景一般是進行多項選擇，比如個人愛好，或者管理員所具有的許可權等等，下面介紹一下如何利用JavaScript獲取被選中核取方塊的value值。

程式碼如下:

[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 obt=document.getElementById("bt");
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var inputs=obox.getElementsByTagName("input");
 
  obt.onclick=function(){
    for(var index=0;index<inputs.length;index++){
      if(inputs[index].checked==true){
        oshow.innerHTML=oshow.innerHTML+inputs[index].value;
      }
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <input type="checkbox" value="1"/>
  <input type="checkbox" value="2"/>
  <input type="checkbox" value="3"/>
  <input type="checkbox" value="4"/>
  <input type="checkbox" value="5"/>
</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

在上面的程式碼中，點選按鈕就可以將選中的核取方塊的值寫入指定的div中。

相關文章