快捷導(dǎo)航

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

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

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

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

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

具體的實(shí)現(xiàn)過(guò)程很簡(jiǎn)單：

第一步

設(shè)計(jì)一個(gè)簡(jiǎn)單的表格：

設(shè)置表格列標(biāo)題，在列標(biāo)題中的單選框?yàn)槿x框；

設(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>

第二步

通過(guò)jQuery實(shí)現(xiàn)當(dāng)點(diǎn)擊全選框的時(shí)候所有單選框都選中，當(dāng)再次點(diǎn)擊全選框的時(shí)候所有單選框都是未選中狀態(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é)》

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

您可能感興趣的文章:

相關(guān)文章

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