前幾個章節已經講述了JavaScript對象定義的幾種方式，並且用構造函數方式和字面來嗯方式來封裝了一些數學相關的類和一些簡單的特效，相信讀者對JS面向對象編程有個大概輪廓了。
所以，接下來的幾個章節，每個章節就是一個簡單有趣的小案例，這樣有利於我們對JS對象封裝的學習興趣。今天我們先來實現全選、不選、反選的效果，這個效果在網頁中經常見到，比如網易郵箱。
頁面效果如圖：
頁面中存在3個按鈕和一排checkbox按鈕，當用戶選中全選按鈕的時候所有的checkbox則被選中;當用戶選中不選按鈕的時候所有的checkbox則全部爲未選中;當用戶選中反選的時候則已選中的checkbox標誌爲未選中，未選中的按鈕被標誌爲已選擇。
頁面Html標籤爲：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選不選反選</title>
</head>
<body>
<div id="check">
<input type="button" class="button" value="全選"/>
<input type="button" class="button" value="不選"/>
<input type="button" class="button" value="反選"/>
<br />
<input type="checkbox" class="checkbox" value="">橘子<br />
<input type="checkbox" class="checkbox" value="">蘋果<br />
<input type="checkbox" class="checkbox" value="">香蕉<br />
<input type="checkbox" class="checkbox" value="">葡萄<br />
<input type="checkbox" class="checkbox" value="">西瓜<br />
<input type="checkbox" class="checkbox" value="">荔枝<br />
<input type="checkbox" class="checkbox" value="">芒果<br />
<input type="checkbox" class="checkbox" value="">獼猴桃
</div>
</body>
</html>
該頁面有3個button按鈕和8個checkbox按鈕，爲了便於JS代碼選擇出這兩種不同的input，給button按鈕加上class爲button，給checkbox加上class爲checkbox。接下來我們先來實現全選按鈕效果：
var Checkbox = function(id) {
//根據id獲取dom對象
var obj = document.getElementById(id);
//獲取3個button按鈕
this.aBtn = obj.getElementsByClassName("button");
this.aCheckBox = obj.getElementsByClassName("checkbox");
//實現全選按鈕效果
this.checkAll = function () {
//將this賦值給變量that
that = this;
//給第一個按鈕註冊單擊事件
this.aBtn[0].onclick = function () {
//循環遍歷每一個checkbox,給他們賦值選中
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = true;
}
}
};
}
Checkbox類的構造函數有一個參數id，通過document.getElementById()方法獲取指向頁面id爲check的div容器dom節點，然後再通過該節點獲取class爲button的按鈕節點和class爲checkbox的複選框節點，在全選按鈕的實現方法中，先給第一個按鈕註冊單擊監聽事件，第一個按鈕的下標爲this.aBtn[0],所以得給這個按鈕加監聽事件。當用戶選中這個按鈕時，循環遍歷每一個checkbox，並給對應的checkbox節點的屬性checked賦值爲true。
同樣的，不選按鈕的實現思路和全選相同，只不過給每一個checkbox節點的屬性checked賦值的時候，賦值爲false。對應的代碼如下：
//不選按鈕
this.unCheckAll = function () {
//將this賦值給變量that
that = this;
this.aBtn[1].onclick = function () {
//循環遍歷每一個checkbox,給他們賦值不選中
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = false;
}
}
};
反選按鈕的思路則也是在for循環裏面做相應的判斷，另當前checkbox節點的checked屬性值等於當前值的取反即可。
//反選
this.reverseCheck = function () {
//將this賦值給變量that
that = this;
this.aBtn[2].onclick = function () {
//循環遍歷每個checkbox,賦值相反
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = !that.aCheckBox[i].checked;
}
}
}
整個頁面的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選不選反選</title>
<script>
var Checkbox = function(id) {
//根據id獲取dom對象
var obj = document.getElementById(id);
//獲取3個button按鈕
this.aBtn = obj.getElementsByClassName("button");
this.aCheckBox = obj.getElementsByClassName("checkbox");
//實現全選按鈕效果
this.checkAll = function () {
//將this賦值給變量that
that = this;
//給第一個按鈕註冊單擊事件
this.aBtn[0].onclick = function () {
//循環遍歷每一個checkbox,給他們賦值選中
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = true;
}
}
};
//是選不選按鈕
this.unCheckAll = function () {
//將this賦值給變量that
that = this;
this.aBtn[1].onclick = function () {
//循環遍歷每一個checkbox,給他們賦值不選中
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = false;
}
}
};
//反選
this.reverseCheck = function () {
//將this賦值給變量that
that = this;
this.aBtn[2].onclick = function () {
//循環遍歷每個checkbox,賦值相反
for(var i = 0; i < that.aCheckBox.length; i++) {
that.aCheckBox[i].checked = !that.aCheckBox[i].checked;
}
}
}
}
window.onload = function () {
var checkbox = new Checkbox('check');
checkbox.checkAll();
checkbox.unCheckAll();
checkbox.reverseCheck();
}
</script>
</head>
<body>
<div id="check">
<input type="button" class="button" value="全選"/>
<input type="button" class="button" value="不選"/>
<input type="button" class="button" value="反選"/>
<br />
<input type="checkbox" class="checkbox" value="">橘子<br />
<input type="checkbox" class="checkbox" value="">蘋果<br />
<input type="checkbox" class="checkbox" value="">香蕉<br />
<input type="checkbox" class="checkbox" value="">葡萄<br />
<input type="checkbox" class="checkbox" value="">西瓜<br />
<input type="checkbox" class="checkbox" value="">荔枝<br />
<input type="checkbox" class="checkbox" value="">芒果<br />
<input type="checkbox" class="checkbox" value="">獼猴桃
</div>
</body>
</html>
驅動代碼在那個window.onload函數中，當頁面加載完畢之後即可創建一個Checkbox對象，並調用了checkAll、unCheckAll、reverseCheck函數對這仨按鈕進行監聽，代碼大致如此。