JavaScript 限制核取方塊選中數目

admin發表於2018-11-21
JavaScript

有時候需要限制核取方塊可以被選中的個數，比如對個人介紹的一些選項中，會有選中個數的限制。

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

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
function checboxNum(name, num) {
  var checboxs = document.getElementsByName(name);
  var a = 0;
  for (var index = 0; index < checboxs.length; index++) {
    if (checboxs[index].checked) {
      a = a + 1;
    }
  }
  if (a == num) {
    for (var index = 0; index < checboxs.length; index++) {
      if (!checboxs[index].checked) {
        checboxs[index].disabled = 'disabled';
      }
    }
  } else {
    for (var index = 0; index < checboxs.length; index++)
      checboxs[index].removeAttribute('disabled');
  }
}
window.onload = function() {
  var box = document.getElementById("box");
  box.onclick = function() {
    checboxNum("ck", 3);
  }
}
</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> 
</body> 
</html>

規定能夠選中的核取方塊的數量，達到數量之後，其他核取方塊將會被設定為不可用狀態。

一.實現原理:

原理非常簡單，為checkbox的父元素註冊click事件處理函式，當點選核取方塊的時候觸發click事件，然後通過事件冒泡現象傳遞到父元素，這樣就會執行事件處理函式，此函式會遍歷所有的核取方塊，每選中一個，變數a就會+1，如果數量到達規定的數量，除了被選中的核取方塊之外，其他的核取方塊都會被設定為不可用。

二.程式碼註釋:

（1）.function checboxNum(name,num){}，div的onclick事件處理函式，name是核取方塊的name屬性值，num是可以選中的數量。

（2）.var checboxs=document.getElementsByName(name)，獲取核取方塊物件集合。

（3）. var a=0，宣告一個變數a，並賦初值0.

（4）.for(var index=0;index<checboxs.length;index++),遍歷所有的核取方塊。

（5）.if(checboxs.checked)，如果核取方塊被選中。

（6）.a=a+1，a的值+1。

（7）.if(a==num)，如果a的值達到規定的可選數量。

（8）.for(var index=0;index<checboxs.length;index++) ，遍歷所有的核取方塊。

（9）.if(!checboxs.checked)，如果核取方塊沒有被選中。

（10）.checboxs.disabled='disabled'，將沒有被選中的設定為不可用。

（11）.for(var index=0;index<checboxs.length;index++) ，遍歷核取方塊。

（12）.checboxs.removeAttribute('disabled')，將核取方塊設定為可用。

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

（14）.var box=document.getElementById("box")，獲取div物件。

（15）.box.onclick=function()，為div物件註冊事件處理函式。

三.相關閱讀:

（1）.getElementsByName()參閱document.getElementsByName()一章節。

（2）.for參閱JavaScript for 迴圈語句一章節。

（3）.removeAttribute()參閱JavaScript removeAttribute()一章節。

相關文章