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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:36

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

jQuery實(shí)現(xiàn)全選、反選和不選功能:本文給大家分享一段基于jQuery的全選、反選和不選功能的代碼，適用于網(wǎng)頁多選后需要進(jìn)行批量操作的場景（如批量刪除等）。文章結(jié)合實(shí)例，代碼簡潔，基本覆蓋選項(xiàng)選擇操作的方方面面，希望可以幫到有需要的WEB愛好者。 HTML 我們的頁面上有一個(gè)歌曲列表，列出

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀jQuery實(shí)現(xiàn)全選、反選和不選功能:本文給大家分享一段基于jQuery的全選、反選和不選功能的代碼，適用于網(wǎng)頁多選后需要進(jìn)行批量操作的場景（如批量刪除等）。文章結(jié)合實(shí)例，代碼簡潔，基本覆蓋選項(xiàng)選擇操作的方方面面，希望可以幫到有需要的WEB愛好者。 HTML 我們的頁面上有一個(gè)歌曲列表，列出

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

HTML

我們的頁面上有一個(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">

jQuery

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

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

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

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

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

$("#unSelect").click(function () { 
 $("#list :checkbox,#all").prop("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).prop("checked", !$(this).prop("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()就是用來檢測全選框#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).prop("checked")==true){
 chk++;
 }
 });
 if(chknum==chk){//全選
 $("#all").prop("checked",true);
 }else{//不全選
 $("#all").prop("checked",false);
 }
}

總結(jié)

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

$(function () {
 //全選或全不選
 $("#all").click(function(){ 
 if(this.checked){ 
 $("#list :checkbox").prop("checked", true); 
 }else{ 
 $("#list :checkbox").prop("checked", false);
 } 
 }); 
 //全選 
 $("#selectAll").click(function () {
 $("#list :checkbox,#all").prop("checked", true); 
 }); 
 //全不選
 $("#unSelect").click(function () { 
 $("#list :checkbox,#all").prop("checked", false); 
 }); 
 //反選 
 $("#reverse").click(function () { 
 $("#list :checkbox").each(function () { 
 $(this).prop("checked", !$(this).prop("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).prop("checked")==true){
 chk++;
 }
 });
 if(chknum==chk){//全選
 $("#all").prop("checked",true);
 }else{//不全選
 $("#all").prop("checked",false);
 }
}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：功能全選反選

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦