快捷導(dǎo)航

jquery 實現(xiàn)復(fù)選框的全選操作實例代碼

更新時間：2017年01月24日 16:58:54 投稿：lqh

這篇文章主要介紹了jquery 實現(xiàn)復(fù)選框的全選操作實例代碼的相關(guān)資料,需要的朋友可以參考下

jquery 實現(xiàn)復(fù)選框的全選操作實例代碼

最近做了個需求，需要實現(xiàn)列表復(fù)選框的全選/取消全選操作，由于之前對這塊不是很了解，所以從網(wǎng)上查了一些資料，雖然有各種實現(xiàn)方法，但沒找到直接可以套用的。自己琢磨了下，把功能實現(xiàn)，整理如下。

實現(xiàn)細(xì)節(jié)如有可改進(jìn)的地方，不吝賜教。

首先是html部分的代碼，這里有一個表格，表格里面有一些選項：

<div id="list"> 
  <table> 
    <tr><td>選項1<input type="checkbox" name="group" value="1"/></tr> 
    <tr><td>選項2<input type="checkbox" name="group" value="2"/></tr> 
    <tr><td>選項3<input type="checkbox" name="group" value="3"/></tr> 
  </table> 
</div>
全選<input type="checkbox" id="all"/>

接下來是jquery：

<script> 
$(document).ready(function () { 
  //全選或全不選 
  $("#all").click(function () { 
    if (this.checked) { 
      $("#list :checkbox").attr("checked", true); 
    } else { 
      $("#list :checkbox").attr("checked", false); 
    } 
  }); 
  //設(shè)置全選復(fù)選框 
  $("#list :checkbox").click(function () { 
    allchk(); 
  }); 
  function allchk() { 
    var chknum = $("#list :checkbox").size();//選項總個數(shù) 
    var chk = 0; 
    $("#list :checkbox").each(function () { 
      if ($(this).attr("checked")) { 
        chk++; 
      } 
    }); 
    if (chknum == chk) {//全選 
      $("#all").attr("checked", true); 
    } else {//不全選 
      $("#all").attr("checked", false); 
    } 
  } 
  //顯示時執(zhí)行一次 
  allchk(); 
}); 
</script>

當(dāng)全選框被點擊時，判斷選中狀態(tài)，如果是選中，則為所有選項的復(fù)選框設(shè)置選中屬性；如果是取消選中，則為所有選項的復(fù)選框取消選中屬性。

同時，為每個選項復(fù)選框添加判斷，當(dāng)所有的選項復(fù)選框都選中時，全選框自動選中；否則，全選框取消選中。這里通過計數(shù)來比較（選項的數(shù)量和選中的選項數(shù)量），通過each方法來進(jìn)行遍歷。

最后，在顯示時執(zhí)行一次，這是確保如果初始狀態(tài)就是所有選項都選中的狀態(tài)，要保證全選框也是選中的狀態(tài)。

參考：jquery中checkbox使用方法簡單實例演示

您可能感興趣的文章:

相關(guān)文章

使用jQuery實現(xiàn)擲骰子游戲
這篇文章主要介紹了使用jQuery實現(xiàn)擲骰子游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
JQuery 解析多維的Json數(shù)據(jù)格式
對博客系統(tǒng)已經(jīng)做到了博客評論模塊部分了，對單篇博文進(jìn)行靜態(tài)化的同時對博文的評論部分采取AJAX的方式去讀取。
2009-11-11
JQuery顯示隱藏頁面元素的方法總結(jié)
這篇文章主要介紹了JQuery顯示隱藏頁面元素的方法總結(jié),本文分別講解了show()、hide()、toggle()、slideDown()、css()5種控制顯示隱藏某個DIV或P標(biāo)簽等頁面元素的方法,需要的朋友可以參考下
2015-04-04
如何使用CSS3和JQuery easing 插件制作絢麗菜單
這篇文章主要介紹了如何使用CSS3和JQuery easing 插件制作絢麗菜單，這樣做可以讓有菜單的盒子滑出，并且彈出縮略圖。在某些菜單項中我們還包含著有進(jìn)一步鏈接的子菜單。取決于我們鼠標(biāo)在菜單項上的停懸，子菜單將向左或向右滑動。,需要的朋友可以參考下
2019-06-06
jquery 實現(xiàn)兩Select 標(biāo)簽項互調(diào)示例代碼
這篇文章主要與大家分享了jquery實現(xiàn)兩Select標(biāo)簽項互調(diào)的具體實現(xiàn)，比較簡單，比較實用
2014-09-09
jQuery中實現(xiàn)動畫效果的基本操作介紹
本篇文章小編將為大家介紹，在jQuery中實現(xiàn)動畫效果的基本操作介紹，需要的朋友可以參考一下
2013-04-04
JQuery之proxy實現(xiàn)綁定代理方法
下面小編就為大家?guī)硪黄狫Query之proxy實現(xiàn)綁定代理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
Jquey拖拽控件Draggable使用方法(asp.net環(huán)境)
使用時首先依次引用Jquery，Jquery-Ui ，Draggable三個Js。然后在js中編寫相應(yīng)的代碼，相關(guān)代碼說明請看程序中的注釋。
2010-09-09
JQuery實現(xiàn)動態(tài)表格點擊按鈕表格增加一行
動態(tài)表格,功能為點擊添加按鈕，表格增加一行并給其name屬性賦予的值，點擊刪除，自動刪除這一行，具體實現(xiàn)如下
2014-08-08
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡潔，不容易出錯。each()函數(shù)封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。
2015-05-05