快捷導(dǎo)航

jQuery實現(xiàn)table表格checkbox全選的方法分析

更新時間：2018年07月04日 11:40:39 作者：cat_pp

這篇文章主要介紹了jQuery實現(xiàn)table表格checkbox全選的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)與元素遍歷實現(xiàn)table表格checkbox元素狀態(tài)動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)table表格checkbox全選的方法。分享給大家供大家參考，具體如下：

今天在頁面中使用jQuery實現(xiàn)了全選框操作，如圖：

具體的實現(xiàn)過程很簡單：

第一步

設(shè)計一個簡單的表格：

設(shè)置表格列標(biāo)題，在列標(biāo)題中的單選框為全選框；

設(shè)置表格題，表格題的單選框就是普通的單選框啦：

<table>
    <thead>
      <tr>
        <td>
          <input type="checkbox" onclick="selectAll(this.checked)" />
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="check" />
        </td>
        <td>
          <input type="checkbox" name="check" />
        </td>
        <td>
          <input type="checkbox" name="check" />
        </td>
      </tr>
    </tbody>
  </table>

第二步

通過jQuery實現(xiàn)當(dāng)點擊全選框的時候所有單選框都選中，當(dāng)再次點擊全選框的時候所有單選框都是未選中狀態(tài)：

function selectAll(selectStatus){//傳入?yún)?shù)（全選框的選中狀態(tài)）
  //根據(jù)name屬性獲取到單選框的input，使用each方法循環(huán)設(shè)置所有單選框的選中狀態(tài)
  if(selectStatus){
    $("input[name='check']").each(function(i,n){
      n.checked = true;
    });
  }else{
    $("input[name='check']").each(function(i,n){
      n.checked = false;
    });
  }
}

好啦，大功告成！

ps：親們，不要忘了引入jQuery的js文件！

可使用cdn如：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當(dāng)一個元素有一個動畫隊列時，停止的是當(dāng)前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)jquery動畫有所幫助
2013-05-05
jQuery中讀取json文件示例代碼
json文件是一種輕量級的數(shù)據(jù)交互格式。一般在jquery中使用getJSON()方法讀取，具體示例代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-05-05
jQuery實現(xiàn)點擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)點擊后高亮背景固定顯示的菜單效果,可實現(xiàn)鼠標(biāo)點擊菜單項后呈現(xiàn)出鼠標(biāo)滑過一樣的背景高亮顯示效果,同時該顯示效果固定不變,需要的朋友可以參考下
2016-09-09
基于jQuery的ajax功能實現(xiàn)web service的json轉(zhuǎn)化
前面文章說過下次會給大家介紹詳細的基于web Services的JqueryAjax調(diào)用如何把一個datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶端再通過json2.js轉(zhuǎn)化成javascript對象。
2009-08-08
jquery關(guān)于圖形報表的運用實現(xiàn)代碼
jquery 關(guān)于圖形報表的運用實現(xiàn)代碼，需要的朋友可以參考下。
2011-01-01
基于JQuery 滑動與動畫的說明介紹
本篇文章小編為大家介紹，基于JQuery 滑動與動畫的說明介紹。需要的朋友參考下
2013-04-04
使用jquery插件實現(xiàn)圖片延遲加載技術(shù)詳細說明
有時我們看到一些大型網(wǎng)站，頁面如果有很多圖片的時候，當(dāng)你滾動到相應(yīng)的行時，當(dāng)前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區(qū)域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個方案是比較好的。
2011-03-03
基于Jquery的簡單&簡陋Tabs插件代碼
一個基于Jquery的簡單&簡陋Tabs插件，學(xué)習(xí)的朋友可以參考下。
2010-02-02
jquery獲取當(dāng)前日期的方法
這篇文章主要介紹了jquery獲取當(dāng)前日期的方法,涉及針對日期時間的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
jquery代碼規(guī)范讓代碼越來越好看
本文主要介紹了jquery的代碼規(guī)范。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02