jquery實現全選、全不選、反選、擷取選中的所有值總結

最後更新：2016-10-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

HTML

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox2</title>
<style>
li {
list-style:none;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script> 
</head>
<body>
<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.Let It go</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">
</body>
</html>

jQuery

****

jQuery 事件 - ready() 方法有一下兩種：

$(document).ready(function(){});

$(function(){});

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的狀態。

//反選 each 遍曆

$("#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(‘,‘);//轉換為逗號隔開的字串 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);}}


聲明：文章來源於helloweba.com並保留原文連結：http://www.helloweba.com/view-blog-254.html

jquery實現全選、全不選、反選、擷取選中的所有值總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery實現全選、全不選、反選、擷取選中的所有值總結

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support