HTML
我們的頁面上有一個歌曲列表，列出多行歌曲名稱，並匹配復選框供用戶選擇，並且在列表下方有一排操作按鈕。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>checkbox2</title> <style> li { list-style:none; } </style> <script src="js/jquery-1.7.2.min.js"></script> <!-- 務必要引用jquery庫文件 --> </head> <body> <ul id="list"> <li><label><input type="checkbox" value="1"> 1.如夢一場</label></li> <li><label><input type="checkbox" value="2"> 2.海闊天空</label></li> <li><label><input type="checkbox" value="3"> 3.Let It go</label></li> <li><label><input type="checkbox" value="4"> 4.不再猶豫</label></li> <li><label><input type="checkbox" value="5"> 5.光輝歲月</label></li> <li><label><input type="checkbox" value="6"> 6.泡沫</label></li> </ul> <input type="checkbox" id="all"> <input type="button" value="全選" class="btn" id="selectAll"> <input type="button" value="全不選" class="btn" id="unSelect"> <input type="button" value="反選" class="btn" id="reverse"> <input type="button" value="獲得選中的所有值" class="btn" id="getValue"> </body> </html>
jQuery
jQuery 事件 - ready() 方法有一下兩種：
$(document).ready(function(){}); $(function(){});
需求：1、全選或全不選。當勾選全選按鈕#selectAll旁邊的復選框#all時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。
//全選、全不選
$("#all").click(function(){
if (this.checked) {
$("#list :checkbox").attr("checked",true);
} else{
$("#list :checkbox").attr("checked",false);
};
});
需求：2、全選。當點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復選框#all時，列表中所有的選項都會被選中，包括全選旁邊的復選框也是選中狀態。
//全選 $("#selectAll").click(function(){ $("#list :checkbox,#all").attr("checked",true); });
需求：3、全不選。當點擊全不選按鈕#unSelect時，列表中所有的選項都是未選中狀態，當然包括#all也是未選中狀態。
//全不選 $("#unSelect").click(function(){ $("#list :checkbox,#all").attr("checked",false); });
需求：4、反選。當點擊反選按鈕#reverse，列表中所有被選中的選項變為未選中狀態，而所有未選中的選項變為已選中狀態，當然也要注意#all的狀態。
//反選 each 遍歷 $("#reverse").click(function(){ $("#list :checkbox").each(function(){ $(this).attr("checked",!$(this).attr("checked")); }); allchk(); });
上述代碼中遍歷了選項列表，然后改變checked屬性，調用函數allchk()是干什么的，別急，留在后面介紹（這部分和接下來的內容沒有弄太明白，歡迎高手點評）。
5、獲得選中的所有值。我們要跟后台程序交互就必須獲取列表中所選項的值，我們通過遍歷數組，將選中項的值存放在數組中，最后組成由逗號(,)隔開的字符串，開發者就可以通過獲取這個字符串進行相應的操作了。
$("#getValue").click(function(){
var valArr = new Array;
$("#list :checkbox[checked]").each(function(i){
valArr[i] = $(this).val();
});
var vals = valArr.join(',');//轉換為逗號隔開的字符串 join 拼合
alert(vals);
});
為了完善選中選項功能，我們在單擊列表中某個選項時，如果勾選的項剛好滿足全部選中的條件，則#all也要相應的變為選中狀態，同樣，如果事先所有的選項是選中狀態時，當取消勾選某個選項時，那么#all也要相應的變為未選中狀態。
//設置全選復選框 $("#list :checkbox").click(function(){ allchk(); }); 函數allchk()就是用來檢測全選框#all應該是選中狀態還是未選中狀態的，請看代碼。 function allchk(){ var chknum = $("#list :checkbox").size();//選項總個數 var chk = 0; $("#list :checkbox").each(function () { if($(this).attr("checked")==true){ chk++; } }); if(chknum==chk){//全選 $("#all").attr("checked",true); }else{//不全選 $("#all").attr("checked",false); } }
聲明：文章來源於helloweba.com並保留原文鏈接：http://www.helloweba.com/view-blog-254.html