javascript 限制checkbox核取方塊選中數量

admin發表於2017-04-01
JavaScript

在實際應用中，可能提供了很多選項供使用者選擇，但是通常會限制選中的數目。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var count=2;
  var num=0;
  var odiv=document.getElementById("show");
  var obox=document.getElementById("box");
  var cks=obox.getElementsByTagName("input");
  for(var index=0;index<cks.length;index++){
    cks[index].onclick=function(){
      if(this.checked){
        if(num==count){
          odiv.innerHTML="已經達到最大選中上限";
          return false;
        }
        else{
          num++;
        }
      }
      else{
        num--;
      }
    }
  }
}
</script>
<body>
<div id="box"> 
<form name="form">
  最多隻能選擇兩門課程: 
  <p><input type="checkbox" name="div"/>div教程
  <p><input type="checkbox" name="css"/>css教程  
  <p><input type="checkbox" name="json"/>json教程  
  <p>    
</form>
</div>
<div id="show"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var count=2，核取方塊可以選中的上限數目。

3.var num=0，用來儲存當前選中的核取方塊的數目。

4.var odiv=document.getElementById("show")，獲取id屬性值為show的元素物件。

5.var obox=document.getElementById("box")，獲取id屬性值為box的元素物件。

6.var cks=obox.getElementsByTagName("input")，獲取obox元素下的input元素集合，這裡就是核取方塊集合。

7.for(var index=0;index<cks.length;index++)，遍歷每一個核取方塊元素，並註冊onclick事件處理函式。

8.cks[index].onclick=function(){}，為當前核取方塊註冊onclick事件處理函式。

9.if(this.checked)，判斷核取方塊是否被選中。

10.if(num==count){

  odiv.innerHTML="已經達到最大選中上限";

  return false;

}，如果選中的數目已經達到最大上限，那麼在div中顯示相應的提示。

return false的作用是取消預設動作，點選核取方塊的預設動作就是選中核取方塊或者取消選中核取方塊。

11.else{

  num++;

}，如果沒有達到最大數目，那麼就增加num的值。

12.else{

  num--;

}，如果核取方塊已經選中，那麼再點選就是取消選中，於是就要減少num的值。

二.相關閱讀:

1.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

2.checked屬性可以參閱javascript checkbox.checked屬性一章節。

3.innerHTML屬性可以參閱js innerHTML一章節。

相關文章