jquery中checkbox使用方法簡單實例演示

更新時間：2015年11月24日 16:21:41 投稿：lijiao

這篇文章主要介紹了jquery中checkbox使用方法簡單實例演示，感興趣的小伙伴們可以參考一下

和大家分享一段基于jQuery實現(xiàn)checkbox列表全選、反選和不選功能的代碼，適用于網(wǎng)頁多選后需要進(jìn)行批量操作的場景（如批量刪除等）。文章結(jié)合實例，代碼簡潔，基本覆蓋選項選擇操作的方方面面，希望可以幫到有需要的前端開發(fā)愛好者。

引入jquery庫
<script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script>
構(gòu)建HTML

一般從數(shù)據(jù)庫讀出來的列表都需要批量選中以便刪除與編輯等，下面我們就來模擬下，實現(xiàn)復(fù)選框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.從開始你就不應(yīng)用愛上我</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、全選或全不選。當(dāng)勾選全選按鈕#selectAll旁邊的復(fù)選框#all時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態(tài)。

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

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

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

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

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

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

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

代碼中遍歷了選項列表，然后改變checked屬性，最后調(diào)用函數(shù)allchk()，后面將介紹該函數(shù)。

5、獲得選中的所有值。我們要跟后臺程序交互就必須獲取列表中所選項的值，我們通過遍歷數(shù)組，將選中項的值存放在數(shù)組中，最后組成由逗號(,)隔開的字符串，開發(fā)者就可以通過獲取這個字符串進(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)換為逗號隔開的字符串 
 alert(vals); 
});

為了完善選中選項功能，我們在單擊列表中某個選項時，如果勾選的項剛好滿足全部選中的條件，則#all也要相應(yīng)的變?yōu)檫x中狀態(tài)，同樣，如果事先所有的選項是選中狀態(tài)時，當(dāng)取消勾選某個選項時，那么#all也要相應(yīng)的變?yōu)槲催x中狀態(tài)。

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

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

function allchk(){ 
 var chknum = $("#list :checkbox").size();//選項總個數(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)非常簡單，使用attr()來設(shè)置"checked"屬性的值，true未選中，false為未選中，在整個全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài)，以及獲取選中選項的值。以下我將所有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(); 
 }); 
 
 //獲取選中選項的值 
 $("#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();//選項總個數(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中checkbox的使用方法有個大概的認(rèn)識，再通過大量實例熟練掌握checkbox使用方法。

您可能感興趣的文章: