1、需求分析
可同時選中多個選項，實現全選、全不選、反選等功能。
2、技術分析
基礎的HTML、CSS、JavaScript。
3、詳細分析
3.1 HTML部分
圖示是一個列表加底部一段文字說明，列表包含三個部分，整體是一個多選列表，上部是總的選項，下面是具體選項，因此該列表是一個自定義列表：
<body>
<dl class="checkBox">
<dt><input type="checkbox" id="checkAll">
<label>全選</label>
/*給"反選"建立js鏈接，實現動態效果*/
<a href="javascript:;">反選</a>
</dt>
<dd>
/*選項由選擇框(輸入框)和標示構成，所以使用<input>標簽和<label>標簽,label 元素不會呈現任何特殊效果。如果在 label 元素內點擊文本，就會觸發此控件*/
<p><input type="checkbox" name="item"><label>選項1</label></p>
<p><input type="checkbox" name="item"><label>選項2</label></p>
<p><input type="checkbox" name="item"><label>選項3</label></p>
<p><input type="checkbox" name="item"><label>選項4</label></p>
<p><input type="checkbox" name="item"><label>選項5</label></p>
<p><input type="checkbox" name="item"><label>選項6</label></p>
<p><input type="checkbox" name="item"><label>選項7</label></p>
<p><input type="checkbox" name="item"><label>選項8</label></p>
</dd>
</dl>
<center>1、切換全選全不選文字2、根據選中個數更新全選框狀態</center>
</body>
3.2 CSS部分
<style type="text/css">
/*瀏覽器格式化，消除頁面預留空間*/
*{
margin: 0;
padding: 0;
}
/*適應各種瀏覽器屏幕尺寸*/
body{
width: 100%;
height: 100%;
/*設置頁面字體大小*/
font-size: 14px;
}
/*列表內元素垂直居中*/
label,input,a{vertical-align:middle;}
/*給選項表示設置內邊距*/
label{padding:0 10px 0 5px;}
/*給列表設置邊框*/
dl{
width: 120px;
/*元素水平居中*/
margin: 10px auto;
border: 1px solid #666;
/*設置邊框圓角*/
border-radius: 5px;
background: #fafafa;
padding: 10px 5px;
}
/*消除鏈接下划線，設置鏈接字體顏色*/
a{
text-decoration: none;
color: #09f;
}
/*鼠標指針浮動在鏈接上時，樣式改變:字體變紅色*/
a:hover{
color: red;
}
dt{
/*下邊框*/
border-bottom: 1px solid black;
/*距離底部內邊距*/
padding-bottom: 10px;
}
/*標示字體加粗*/
dt label{
font-weight: 700;
}
/*各個選項距離頂部外邊距*/
p{
margin-top: 10px;
}
</style>
3.3 JS部分
<script type="text/javascript">
window.onload=function(){//網頁加載完成后調用函數
var oA=document.getElementsByTagName("a")[0];//獲取第一個a元素，即鏈接"反選"
var oInput=document.getElementsByTagName("input");//獲取所有的輸入選擇框
var oLabel=document.getElementsByTagName("label")[0];//獲取第一個lable標簽，lable標簽為input標簽定義標記，即"全選"選項。
var isCheckAll=function( ){//聲明一個全選函數
for(var i=1,n=0;i<oInput.length;i++){//從i=1循環，排除第一個選項"全選“，從選項1開始循環。
oInput[i].checked && n++//沒選擇一個選項，則n增加1，n=已選的項目數
}
oInput[0].checked=n==oInput.length-1;//選擇第一個選項=選擇第一個項目之外的全部選項，所以點擊全選的同時，其他所有選項一並選中。
oLabel.innerHTML = oInput[0].checked ? "全不選" : "全選"//innerHtml改變第一個標簽"全選'的元素內容，后面為判斷語句：選擇"全選"時，全選變為全不選，
否則為全選。
};
oInput[0].onclick=function(){//給第一個選項"全選"綁定點擊函數事件,點擊全選時，執行函數
for(var i=1;i<oInput.length;i++){
oInput[i].checked=this.checked//當點擊第一個"全選"選項時，執行循環函數:遍歷選擇每個選項，即點擊全選時，所有選項都選擇，實現全選，同理實現全不選，
這里的this即為oInput[0]，將第一個input的checked值賦給每一個input元素。
}
isCheckAll()
};
oA.onclick=function(){//給"反選"綁定點擊事件，當點擊反選時，執行相應函數事件
for (var i = 1; i < oInput.length; i++){
oInput[i].checked=!oInput[i].checked//點擊反選，已選變未選，未選變已選，!為否定
};
}
for (var i = 1; i < oInput.length; i++) {//點擊改變元素
oInput[i].onclick=function(){
isCheckAll()//oLabel.innerHTML = oInput[0].checked ? "全不選" : "全選"，根據選中個數更新全選框狀態，當全選后，全選切換為全不選。
};
}
}
</<script>