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

番茄西紅柿發布于2019-04-23 11:43 / 1970人閱讀

摘要：當勾選全選按鈕旁邊的復選框時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。全選或全不選全選全不選反選設置全選復選框獲取選中選項的值選項總個數全選不全選

HTML

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

1 2 3 4 5 6 7 8 9 10 11 12 13 <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時，列表中的選項全部選中，反之取消勾選則列表中的選項全部為未選中狀態。

1 2 3 4 5 6 7 $("#all").click(function(){ if(this.checked){ $("#list :checkbox").prop("checked", true); }else{ $("#list :checkbox").prop("checked", false); } });

2、jQuery全選。當點擊全選按鈕#selectAll或者勾選全選按鈕旁邊的復選框#all時，列表中所有的選項都會被選中，包括全選旁邊的復選框也是選中狀態。

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

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

1 2 3 $("#unSelect").click(function () { $("#list :checkbox,#all").prop("checked", false); });

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

1 2 3 4 5 6 $("#reverse").click(function () { $("#list :checkbox").each(function () { $(this).prop("checked", !$(this).prop("checked")); }); allchk(); });

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

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

1 2 3 4 5 6 7 8 $("#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也要相應的變為未選中狀態。

1 2 3 4 //設置全選復選框 $("#list :checkbox").click(function(){ allchk(); });

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function allchk(){ var chknum = $("#list :checkbox").size();//選項總個數 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); } }

總結

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 $(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(); }); //設置全選復選框 $("#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).prop("checked")==true){ chk++; } }); if(chknum==chk){//全選 $("#all").prop("checked",true); }else{//不全選 $("#all").prop("checked",false); } }

GPU云服務器云服務器全選和反選功能 jquery全選反選全選全不選全選反選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1055.html

Jquery實現checkbox全選、取消全選和反選

摘要：最近在看廖雪峰的教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下首先要獲取到全選和每一項的，然后通過邏輯代碼實現題目要求。最近在看廖雪峰的Jquery教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

wenzi 2019-08-22 15:56 評論0 收藏0
Jquery實現checkbox全選、取消全選和反選

摘要：最近在看廖雪峰的教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下首先要獲取到全選和每一項的，然后通過邏輯代碼實現題目要求。最近在看廖雪峰的Jquery教程，事件篇的練習題比較綜合，研究了很久終于研究出來了，現在分享出來，提供給小白學習。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

高璐 2019-08-02 10:04 評論0 收藏0
原生js練習題---第二課（下）

摘要：最后，我們只要在事件處理程序中獲得這個布爾值傳給這幾個函數就可以了，其中，全選框反選鏈接可以從全選框的屬性獲得這個值，而全體的復選框要獲得就得靠遍歷了。 0x1播放列表收縮展開實現效果值得注意的一個地方是那個箭頭，我這里只是用了簡單的字符串替換，而原題用了背景圖片移動來實現切換箭頭，但是似乎那樣做會導致整個容器的左右偏移、效果不是很好。 0x2鼠標移過顯示車標實現效果這題看起來...

Little_XM 2019-08-19 17:51 評論0 收藏0
jQuery 全選和反選demo

摘要：前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...

diabloneo 2019-08-30 13:56 評論0 收藏0
jQuery 全選和反選demo

摘要：前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數前段時間做了一個全選和反選的功能，最近不忙了，做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下： ...

red_bricks 2019-08-26 11:39 評論0 收藏0