真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

jQuery實(shí)現(xiàn)全選、反選和不選功能的方法詳解

本文實(shí)例講述了jQuery實(shí)現(xiàn)全選、反選和不選功能的方法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)2013年至今，先為莆田等服務(wù)建站，莆田等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為莆田企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

適用于網(wǎng)頁多選后需要進(jìn)行批量操作的場景（如批量刪除等）。如有問題希望大家可以指正。謝謝~~

HTML

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


   1.時(shí)間都去哪兒了
   2.海闊天空
   3.真的愛你
   4.不再猶豫
   5.光輝歲月
   6.喜歡妳

當(dāng)然不要忘了先加載jQuery庫文件:

jQuery 百度cdn

Jquery支持的版本有:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

jQuery

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

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

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

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

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

$("#unSelect").click(function () {
  $("#list :checkbox,#all").attr("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).attr("checked", !$(this).attr("checked"));
  });
  allchk();
});

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

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

為了完善選中選項(xiàng)功能，我們在單擊列表中某個(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)的，請看代碼。

function allchk(){
  var chknum = $("#list :checkbox").size();//選項(xiàng)總個(gè)數(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為未選中，在整個(gè)全選、反選過程中注意處理全選復(fù)選框的選中狀態(tài)，以及獲取選中選項(xiàng)的值。以下我將所有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();
  });
  //獲取選中選項(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).attr("checked")==true){
      chk++;
    }
  });
  if(chknum==chk){//全選
    $("#all").attr("checked",true);
  }else{//不全選
    $("#all").attr("checked",false);
  }
}

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





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






  jQuery實(shí)現(xiàn)的全選、反選和不選功能
  
      
       1.時(shí)間都去哪兒了
       2.海闊天空
       3.真的愛你
       4.不再猶豫
       5.光輝歲月
       6.喜歡妳

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

文章題目：jQuery實(shí)現(xiàn)全選、反選和不選功能的方法詳解
本文URL：http://weahome.cn/article/pdhehs.html