jQuery實現的全選反選和不選功能

本文給大家分享一段基於jquery的全選、反選和不選功能的**，適用於網頁多選後需要進行批量操作的場景（如批量刪除等）。文章結合例項，**簡潔，基本覆蓋選項選擇操作的方方面面，希望可以幫到有需要的web愛好者。

html

我們的頁面上有乙個歌曲列表，列出多行歌曲名稱，並匹配核取方塊供使用者選擇，並且在列表下方有一排操作按鈕。

class="btn" id="selectall">  
class="btn" id="unselect">  
class="btn" id="reverse">  
class="btn" id="getvalue">

jquery

1、全選或全不選。當勾選全選按鈕#selectall旁邊的核取方塊#all時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。

$("#all").click(function()
else
});

2、全選。當點選全選按鈕#selectall或者勾選全選按鈕旁邊的核取方塊#all時，列表中所有的選項都會被選中，包括全選旁邊的核取方塊也是選中狀態。

$("#selectall").click(function () );

3、全不選。當點選全不選按鈕#unselect時，列表中所有的選項都是未選中狀態，當然包括#all也是未選中狀態。

$("#unselect").click(function () );

4、反選。當點選反選按鈕#reverse，列表中所有被選中的選項變為未選中狀態，而所有未選中的選項變為已選中狀態，當然也要注意#all的狀態。

$("#reverse").click(function () );
allchk();
});

上述**中遍歷了選項列表，然後改變checked屬性，呼叫函式allchk()是幹什麼的，別急，留在後面介紹。

5、獲得選中的所有值。我們要跟後台程式互動就必須獲取列表中所選項的值，我們通過遍歷陣列，將選中項的值存放在陣列中，最後組成由逗號(,)隔開的字串，開發者就可以通過獲取這個字串進行相應的操作了。

$("#getvalue").click(function());
var vals = valarr.join(',');//
轉換為逗號隔開的字串
alert(vals);
});

為了完善選中選項功能，我們在單擊列表中某個選項時，如果勾選的項剛好滿足全部選中的條件，則#all也要相應的變為選中狀態，同樣，如果事先所有的選項是選中狀態時，當取消勾選某個選項時，那麼#all也要相應的變為未選中狀態。

//
設定全選核取方塊
$("#list :checkbox").click(function());

函式allchk()就是用來檢測全選框#all應該是選中狀態還是未選中狀態的，請看**。

function allchk()
});if(chknum==chk)
else
}

總結

$(function () 
else
}); 
//全選  
$("#selectall").click(function () );  
//全不選
$("#unselect").click(function () );  
//反選 
$("#reverse").click(function () );
allchk();
});//設定全選核取方塊
$("#list :checkbox").click(function());
//獲取選中選項的值
$("#getvalue").click(function());
var vals = valarr.join(',');
alert(vals);
});}); 
function allchk()
});if(chknum==chk)
else
}

jQuery實現的全選反選和不選功能

jQuery實現全選反選和不選功能

jQuery實現的全選反選和不選功能

全選不選和反選

jQuery實現的全選 反選和不選功能

jQuery實現全選 反選和不選功能

jQuery實現的全選 反選和不選功能

全選 不選和反選

相關推薦

jQuery實現的全選反選和不選功能

jQuery實現全選反選和不選功能

jQuery實現的全選反選和不選功能

全選不選和反選