判斷核取方塊中是否有被選中的程式碼例項

antzone發表於2017-03-12

核取方塊中一般多項，有時候我們需要判斷這些付選中是否有被選中的項。

下面就通過一個例項簡單介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>限定核取方塊的可選個數-螞蟻部落</title>
<script type="text/javascript"> 
function num(){
  var checboxs=document.getElementsByName("ck"); 
  var len=checboxs.length;
  var arr=new Array();
  for(var i=0;i<len;i++){
    if(checboxs[i].checked){
      arr.push(i+1);
    }
  }
  alert(arr);
}
window.onload=function(){
  var bt=document.getElementById("bt");
  bt.onclick=num;
}
</script> 
</head>
<body > 
<div id="box"> 
<label><input type="checkbox" name="ck"/></label>螞蟻部落一 
<label><input type="checkbox" name="ck"/></label>螞蟻部落二
<label><input type="checkbox" name="ck"/></label>螞蟻部落三 
<label><input type="checkbox" name="ck"/></label>螞蟻部落四
<label><input type="checkbox" name="ck"/></label>螞蟻部落五
<p></p> 
<label><input type="checkbox" name="ck"/></label>螞蟻部落六
<label><input type="checkbox" name="ck"/></label>螞蟻部落七 
<label><input type="checkbox" name="ck"/></label>螞蟻部落八
<label><input type="checkbox" name="ck"/></label>螞蟻部落九 
<label><input type="checkbox" name="ck"/></label>螞蟻部落十 
</div> 
<input type="button" value="檢測選中哪幾項" id="bt" />
</body> 
</html>

以上程式碼當點選按鈕的時候，可以彈出被選中了哪幾個。程式碼比較簡單這裡就不多介紹了，只簡單介紹一下原理:

通過getElementsByName()函式獲取checkbox物件集合，然後便利此集合，然後判斷每一項是否被選中，如果被選中就將此核取方塊的順序存入陣列，最後彈出，就這麼簡單。

相關閱讀:

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

2.push()可以參閱JavaScript push()一章節。

相關文章