快捷導(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擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

基于jquery自己寫tab滑動門(通用版)
今天與大家分享一下，自己寫的滑動門。在網(wǎng)上也搜索了一下，沒發(fā)現(xiàn)比較好的，于是乎自己寫一吧~寫起來也很簡單，為了方便使用，我已經(jīng)盡量封裝好了。好吧，閑話少說，直接上代碼吧
2012-10-10
jquery仿微信聊天界面
這篇文章主要為大家詳細(xì)介紹了jquery仿微信聊天界面的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JQuery 選擇器、過濾器介紹
使用過AJAX技術(shù)的人都知道大名鼎鼎的JQuery。雖然我來學(xué)習(xí)之前有看過AJAX的視頻，但那時對WEB應(yīng)用這個東西還比較模糊，不清楚HTML、JSP與Servlet是怎么工作的，甚至不知道JQuery包裝的是什么東西。
2011-02-02
一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個簡單的jQuery插件ajaxfileupload.js實現(xiàn)ajax上傳文件例子,需要的朋友可以參考下
2014-06-06
jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實例形式總結(jié)分析了jQuery針對存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下
2018-07-07
jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
這篇文章主要介紹了jquery實現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼,涉及jquery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
jQuery實現(xiàn)帶動畫效果的二級下拉導(dǎo)航方法
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的二級下拉導(dǎo)航方法,涉及jQuery操作css樣式及鼠標(biāo)事件的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
jquery多瀏覽器捕捉回車事件代碼
最近我們網(wǎng)站做一個合作項目要求在頁面中捕捉回車事件，經(jīng)過好多測試找到這個
2010-06-06
jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會遇到倒計時的功能，例如某些商品在一定期限內(nèi)搞活動，下面小編給大家分享一段代碼關(guān)于jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼，希望對大家有所幫助
2016-02-02
jQuery實現(xiàn)的指紋掃描效果實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery實現(xiàn)的指紋掃描效果,以完整實例形式分析了jQuery實現(xiàn)圖像按照指定模式顯示的相關(guān)實現(xiàn)技巧,并附帶附示例演示與demo源碼供讀者下載參考,需要的朋友可以參考下
2016-01-01