jQuery實現的限制checkbox核取方塊選中的數目

antzone發表於2017-03-18
jQuery

在實際應用中，可能會有這樣的情況，那就是提供了很多可供選擇的核取方塊，但是選中的數目是有限制的，如果超過了指定的數目，就會給出給出提示，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#box input[type=checkbox]").click(function(){
    if($("#box input[type=checkbox]:checked").length>3){
      $("#show").text("選中超出限制");
      return false; 
    }
  })
})
</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"/>
  <input type="checkbox" value="6"/>
  <input type="checkbox" value="7"/>
</div>
</body>
</html>

上面的程式碼實現了限制選中個數的效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#box input[type=checkbox]").click(function(){})，為核取方塊註冊click事件處理函式。

3.if($("#box input[type=checkbox]:checked").length>3)，判斷選中的核取方塊選中的數目是否大於3,。

4.$("#show").text("選中超出限制")，在div中寫入文字。

5.return false，取消預設行為，這個很重要，當超出的時候，再點選其他核取方塊也不會被選中。

二.相關閱讀:

1.[type=checkbox]可以參閱jQuery [attribute=value]一章節。 

2.click事件可以參閱jQuery click 事件一章節。

3.:checked可以參閱jQuery :checked一章節。 

4.return false可以參閱javascript中return false的作用是什麼一章節。

相關文章