JavaScript 復選框特效是現在 web 開發無法避免的技能點之一。在網頁中如何實現多選和單選的效果是一個程序員不得不面對的問題，不同的需求需要不同的實現方法。本文將會為大家介紹一些常見的 JavaScript 復選框特效，并附帶代碼舉例說明。

一、全選與取消全選

在某些網頁中，我們需要批量操作多個復選框，將這些復選框全部選中或全部取消選中是比較常見的需求。接下來我們來看一下代碼的實現：

<input type="checkbox" id="selectAll" onclick="selectAll()"> 全選
<input type="checkbox" name="items">
<input type="checkbox" name="items">
<input type="checkbox" name="items">
<script>
function selectAll(){
var items = document.getElementsByName('items');
var selectAll = document.getElementById('selectAll');
for(var i=0; i<items.length; i++){
items[i].checked = selectAll.checked;
}
}
</script>

以上代碼中，我們定義了一個名為“selectAll”的復選框，當點擊該復選框時，我們通過遍歷“items”元素組來將其它復選框的狀態同步為“selectAll”的狀態。

二、單選效果

如果我們需要實現單選效果，即只有一個復選框能夠被選中。我們可以為每個復選框添加一個“onclick”事件處理。當選中一個復選框時，我們先將其它所有復選框的狀態設為未選中，再將當前復選框選中，這樣就能實現單選效果了。

<input type="checkbox" name="item" onclick="check(this)"> 復選框1
<input type="checkbox" name="item" onclick="check(this)"> 復選框2
<input type="checkbox" name="item" onclick="check(this)"> 復選框3
<script>
function check(obj){
var items = document.getElementsByName('item');
for(var i=0; i<items.length; i++){
items[i].checked = false;
}
obj.checked = true;
}
</script>

以上代碼中，我們為每個復選框添加一個“onclick”事件，點擊時調用“check()”函數。首先我們遍歷“items”元素組，將所有復選框的狀態設為未選中，最后將當前復選框選中。

三、選擇數量限制

除了前兩個例子講到的功能外，我們還可以實現復選框的選擇數量限制。比如說想限制選擇數量為3個，如果選中第4個復選框，則彈出提示框，告知用戶已經超過限制。具體實現方法如下：

<input type="checkbox" name="item" onclick="checkNumber(this, 3)"> 復選框1
<input type="checkbox" name="item" onclick="checkNumber(this, 3)"> 復選框2
<input type="checkbox" name="item" onclick="checkNumber(this, 3)"> 復選框3
<input type="checkbox" name="item" onclick="checkNumber(this, 3)"> 復選框4
<input type="checkbox" name="item" onclick="checkNumber(this, 3)"> 復選框5
<script>
function checkNumber(obj, number){
var items = document.getElementsByName('item');
var count = 0;
for(var i=0; i<items.length; i++){
if(items[i].checked){
count++;
}
if(count>number){
alert('最多選'+number+'個');
obj.checked = false;
break;
}
}
}
</script>

以上代碼中，我們為每個復選框添加一個“onclick”事件，點擊時調用“checkNumber()”函數。首先我們遍歷“items”元素組，如果復選框被選中，則累加一個計數器“count”。如果選擇數量超過限制，則彈出提示并將當前復選框設為未選中。

總結

JavaScript 復選框特效是作為 web 開發入門的基本技能之一，掌握好復選框的多選和單選效果，以及數量限制的實現方法，對于開發者來說是十分有用的。我們需要針對需求，選擇不同的實現方法，才能做出好的效果，提高用戶體驗。