首先我們看個簡單的實例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>jQuery實現CheckBox全選、全不選</title><script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#checkAll").click(function() { $('input[name="subBox"]').attr("checked",this.checked); }); var $subBox = $("input[name='subBox']"); $subBox.click(function(){ $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false); }); }); </script> </head><body> <div> <input id="checkAll" type="checkbox" />全選 <input name="subBox" type="checkbox" />項1 <input name="subBox" type="checkbox" />項2 <input name="subBox" type="checkbox" />項3 <input name="subBox" type="checkbox" />項4 </div></body></html>下面再給大家分享一段基于jQuery實現checkbox列表全選、反選和不選功能的代碼，適用于網頁多選后需要進行批量操作的場景（如批量刪除等）。文章結合實例，代碼簡潔，基本覆蓋選項選擇操作的方方面面，希望可以幫到有需要的前端開發愛好者。
引入jquery庫
<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
構建HTML
一般從數據庫讀出來的列表都需要批量選中以便刪除與編輯等，下面我們就來模擬下，實現復選框checkbox的全選與不選，先建立html
<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.愛上你是我的錯嗎？</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">
jQuery 代碼
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的狀態。
$("#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(',');//轉換為逗號隔開的字符串 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); } }總結
jQuery操作復選框的選中和不選中狀態非常簡單，使用attr()來設置"checked"屬性的值，true未選中，false為未選中，在整個全選、反選過程中注意處理全選復選框的選中狀態，以及獲取選中選項的值。以下我將所有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(); }); //設置全選復選框 $("#list :checkbox").click(function(){ allchk(); }); //獲取選中選項的值 $("#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();//選項總個數 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); } }新聞熱點
疑難解答
