適用于網(wǎng)頁(yè)多選后需要進(jìn)行批量操作的場(chǎng)景（如批量刪除等）。如有問題希望大家可以指正。謝謝~~

HTML

我們的頁(yè)面上有一個(gè)歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕

<ul id="list">      <li><label><input type="checkbox" value="1"> 1.時(shí)間都去哪兒了</label></li>    <li><label><input type="checkbox" value="2"> 2.海闊天空</label></li>    <li><label><input type="checkbox" value="3"> 3.真的愛你</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"> 

當(dāng)然不要忘了先加載jQuery庫(kù)文件:

jQuery 百度CDN

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

jQuery

1、全選或全不選。當(dāng)勾選全選按鈕#selectAll旁邊的復(fù)選框#all時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。

$("#all").click(function(){        if(this.checked){            $("#list :checkbox").attr("checked", true);       }else{            $("#list :checkbox").attr("checked", false);     }    });  

2、全選。當(dāng)點(diǎn)擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復(fù)選框#all時(shí)，列表中所有的選項(xiàng)都會(huì)被選中，包括全選旁邊的復(fù)選框也是選中狀態(tài)。

$("#selectAll").click(function () {    $("#list :checkbox,#all").attr("checked", true);   }); 

3、全不選。當(dāng)點(diǎn)擊全不選按鈕#unSelect時(shí)，列表中所有的選項(xiàng)都是未選中狀態(tài)，當(dāng)然包括#all也是未選中狀態(tài)。

$("#unSelect").click(function () {      $("#list :checkbox,#all").attr("checked", false);   });  

4、反選。當(dāng)點(diǎn)擊反選按鈕#reverse，列表中所有被選中的選項(xiàng)變?yōu)槲催x中狀態(tài)，而所有未選中的選項(xiàng)變?yōu)橐堰x中狀態(tài)，當(dāng)然也要注意#all的狀態(tài)。

$("#reverse").click(function () {      $("#list :checkbox").each(function () {           $(this).attr("checked", !$(this).attr("checked"));       });     allchk(); }); 

上述代碼中遍歷了選項(xiàng)列表，然后改變checked屬性，調(diào)用函數(shù)allchk()是干什么的，別急，留在后面介紹。

5、獲得選中的所有值。我們要跟后臺(tái)程序交互就必須獲取列表中所選項(xiàng)的值，我們通過遍歷數(shù)組，將選中項(xiàng)的值存放在數(shù)組中，最后組成由逗號(hào)(,)隔開的字符串，開發(fā)者就可以通過獲取這個(gè)字符串進(jìn)行相應(yīng)的操作了。

$("#getValue").click(function(){     var valArr = new Array;     $("#list :checkbox[checked]").each(function(i){         valArr[i] = $(this).val();     });     var vals = valArr.join(',');//轉(zhuǎn)換為逗號(hào)隔開的字符串     alert(vals); }); 

為了完善選中選項(xiàng)功能，我們?cè)趩螕袅斜碇心硞€(gè)選項(xiàng)時(shí)，如果勾選的項(xiàng)剛好滿足全部選中的條件，則#all也要相應(yīng)的變?yōu)檫x中狀態(tài)，同樣，如果事先所有的選項(xiàng)是選中狀態(tài)時(shí)，當(dāng)取消勾選某個(gè)選項(xiàng)時(shí)，那么#all也要相應(yīng)的變?yōu)槲催x中狀態(tài)。

//設(shè)置全選復(fù)選框 $("#list :checkbox").click(function(){     allchk(); }); 

函數(shù)allchk()就是用來檢測(cè)全選框#all應(yīng)該是選中狀態(tài)還是未選中狀態(tài)的，請(qǐng)看代碼。

function allchk(){     var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(shù)     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);     } } 

總結(jié)

jQuery操作復(fù)選框的選中和不選中狀態(tài)非常簡(jiǎn)單，使用attr()來設(shè)置"checked"屬性的值，true未選中，false為未選中，在整個(gè)全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài)，以及獲取選中選項(xiàng)的值。以下我將所有jQuery代碼整理在一起，供大家參考。

$(function () {     //全選或全不選     $("#all").click(function(){            if(this.checked){                $("#list :checkbox").attr("checked", true);           }else{                $("#list :checkbox").attr("checked", false);         }         });      //全選       $("#selectAll").click(function () {          $("#list :checkbox,#all").attr("checked", true);       });       //全不選     $("#unSelect").click(function () {            $("#list :checkbox,#all").attr("checked", false);       });       //反選      $("#reverse").click(function () {           $("#list :checkbox").each(function () {                 $(this).attr("checked", !$(this).attr("checked"));            });          allchk();     });          //設(shè)置全選復(fù)選框     $("#list :checkbox").click(function(){         allchk();     });       //獲取選中選項(xiàng)的值     $("#getValue").click(function(){         var valArr = new Array;         $("#list :checkbox[checked]").each(function(i){             valArr[i] = $(this).val();         });         var vals = valArr.join(',');           alert(vals);     }); });  function allchk(){     var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(shù)     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);     } }

jQuery實(shí)現(xiàn)的全選、反選和不選功能 示例：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>演示：jQuery實(shí)現(xiàn)的全選、反選和不選功能</title><style>.top_title{text-align:center;}.demo{width:520px; margin:40px auto 0 auto; min-height:250px;}ul li{line-height:30px; padding:4px 0; font-size:14px}.btn{overflow: hidden;display:inline-block;*display:inline;padding:4px 20px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px; margin-left:2px}</style><script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script><script>  $(function () {    //全選或全不選    $("#all").click(function(){           if(this.checked){               $("#list :checkbox").attr("checked", true);          }else{               $("#list :checkbox").attr("checked", false);        }        });     //全選      $("#selectAll").click(function () {         $("#list :checkbox,#all").attr("checked", true);      });      //全不選    $("#unSelect").click(function () {           $("#list :checkbox,#all").attr("checked", false);      });      //反選     $("#reverse").click(function () {          $("#list :checkbox").each(function () {                $(this).attr("checked", !$(this).attr("checked"));           });         allchk();    });        //設(shè)置全選復(fù)選框    $("#list :checkbox").click(function(){        allchk();    });     //獲取選中選項(xiàng)的值    $("#getValue").click(function(){        var valArr = new Array;        $("#list :checkbox[checked]").each(function(i){            valArr[i] = $(this).val();        });        var vals = valArr.join(',');          alert(vals);    });}); function allchk(){    var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(shù)    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);    }}</script> </head><body><div id="main">   <h2 class="top_title"><a href="http://www.cnblogs.com/phpfensi/p/3853337.html ">jQuery實(shí)現(xiàn)的全選、反選和不選功能</a></h2>   <div class="demo">           <ul id="list">              <li><label><input type="checkbox" value="1"> 1.時(shí)間都去哪兒了</label></li>            <li><label><input type="checkbox" value="2"> 2.海闊天空</label></li>            <li><label><input type="checkbox" value="3"> 3.真的愛你</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>          <inp