Jquery 全選反選實(shí)例代碼

更新時(shí)間：2015年11月19日 15:13:02 投稿：mrr

本文給大家介紹基于jquery代碼實(shí)現(xiàn)的全選全不選反選實(shí)例代碼，代碼簡(jiǎn)單易懂，非常實(shí)用，感興趣的一起學(xué)習(xí)吧

本文給大家分享一段基于jQuery的全選、反選和不選功能的代碼，適用于網(wǎng)頁(yè)多選后需要進(jìn)行批量操作的場(chǎng)景（如批量刪除等）。文章結(jié)合實(shí)例，代碼簡(jiǎn)潔，基本覆蓋選項(xiàng)選擇操作的方方面面，希望可以幫到有需要的WEB愛好者。

//全選全不選

 $('#checkAll').click(function () {
  //判斷是否被選中
  var bischecked = $('#checkAll').is(':checked');
  var fruit = $('input[name="check"]');
  bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false);
 });

//反選遍歷checkbox 如果當(dāng)前為選中就設(shè)置為不選中反之相同

 $("#tabVouchList tr").each(function () {
  if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
   $(this).attr('checked', false);
  } else {
   $(this).attr('checked', true);
  }
 });

HTML table

<table id="tabVouchList">
 <tr>
  <th>
   <input type="checkbox" name="checkAll" />
  </th>
  <th>
   行號(hào)
  </th>
  <th>
   名稱
  </th>
 </tr>
 <tr>
  <td>
   <input type="checkbox" name="check" />
  </td>
  <td>
   行號(hào)
  </td>
  <td>
   名稱
  </td>
 </tr>
</table>

以上代碼就是jquery實(shí)現(xiàn)全選全不選反選的全部代碼，代碼是不是很簡(jiǎn)單啊，希望對(duì)大家工作學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

深入理解jQuery之防止冒泡事件
下面小編就為大家?guī)硪黄钊肜斫鈐Query之防止冒泡事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jQuery實(shí)現(xiàn)的縱向下拉菜單實(shí)例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的縱向下拉菜單,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)縱向下拉菜單的步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-07-07
基于jquery的web頁(yè)面日期格式化插件
基于jquery的web頁(yè)面日期格式化插件，需要的朋友可以參考下。
2011-11-11
JQuery核心函數(shù)是什么及使用方法介紹
這篇文章主要為大家詳細(xì)介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下
2019-02-02
原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav
這幾天要做一個(gè)前臺(tái)頁(yè)面,涉及到分頁(yè),不想自己去寫所以在網(wǎng)上找jquery看有沒有好用一點(diǎn)的分頁(yè)組件,結(jié)果發(fā)現(xiàn)有很多,但是都很麻煩,看到了這個(gè)叫pagenav的發(fā)現(xiàn)相對(duì)來說還是很容易上手的,于是就直接用了,在我看來,能解決問題的辦法就是好辦法.越簡(jiǎn)單越好.
2014-08-08
jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法,涉及jQuery節(jié)點(diǎn)的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-04-04
jquery 鎖定彈出層實(shí)現(xiàn)代碼
這個(gè)東西也是隨手總結(jié)出來的，引用了一些js框架jquery的方法。
2010-02-02
使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)
這篇文章主要介紹了使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)的方法,即控制滾動(dòng)條下拉時(shí)的加載事件,需要的朋友可以參考下
2016-03-03
jQuery+CSS實(shí)現(xiàn)簡(jiǎn)單切換菜單示例
這篇文章主要介紹了jQuery+CSS實(shí)現(xiàn)簡(jiǎn)單切換菜單的方法,涉及jQuery針對(duì)頁(yè)面元素的遍歷及樣式動(dòng)態(tài)變換相關(guān)技巧,需要的朋友可以參考下
2016-07-07