Jquery實(shí)現(xiàn)多個(gè)表格的全選復(fù)選框功能方式
Jquery多個(gè)表格的全選復(fù)選框功能
實(shí)現(xiàn)多個(gè)表格的復(fù)選框功能
HTML+CSS部分
<style> .kctc-table tbody { width: 1180px; background-color: #fff; } .kctc-table tbody tr { width: 1180px; display: flex; } .kctc-table thead { width: 1180px; display: flex; } .kctc-table thead tr { width: 1180px; display: flex; } .kctc-table th, td { flex: 1; border-bottom: 1px solid black; min-height: 40px; line-height: 40px; font-size: 15px; color: #666; } </style>
<table class="kctc-table kcnr" style="margin:0 auto 18px;text-align: center;"> <thead> <th><input type="checkbox" class="checkAll" id="typeid-1" data-typeid="1">全選</th> <th>名稱</th> </thead> <tbody id="type-1" data-typeid="1"> <tr> <td><input type="checkbox" class="check"></td> <td> 2021年10月自考03708中國(guó)近代史綱要 </td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td> 2021年10月自考03708中國(guó)近代史綱要 </td> </tr> </tbody> </table>
JS部分
$(function () { //點(diǎn)擊全選按鈕 $(".checkall").on('click', function () { //獲取到當(dāng)前全選按鈕的data-typeid let id = $(this).attr("data-typeid"); //將獲取到的data-typeid拼接給type-,并找到下面所有的復(fù)選框?qū)⑵錉顟B(tài)改變 $("#type-" + id).find("input[type=checkbox]").prop('checked', this.checked); }) //點(diǎn)擊復(fù)選框單選 $('.check').on('click',function () { //獲取當(dāng)前點(diǎn)擊的check父級(jí)的data-typeid let id = $(this).parents("tbody").attr("data-typeid"); common(id); event.stopPropagation(); }) //點(diǎn)擊一行選中復(fù)選框 $('tr').click(function () { //獲取當(dāng)前點(diǎn)擊的tr父級(jí)的data-typeid let id = $(this).parents("tbody").attr("data-typeid"); //獲取當(dāng)前點(diǎn)擊tr里面復(fù)選框的狀態(tài) var isChecked = $(this).find("input[type=checkbox]").prop('checked'); //改變當(dāng)前點(diǎn)擊tr里面復(fù)選框的狀態(tài) $(this).find("input[type=checkbox]").prop('checked', !isChecked); common(id); }) function common (id){ //獲取當(dāng)前$("#type-" + id)下復(fù)選框的長(zhǎng)度 let len = $("#type-" + id).find("input[type=checkbox]").length; //獲取當(dāng)前$("#type-" + id)下復(fù)選框選中的長(zhǎng)度 let checked_len = $("#type-" + id).find("input[type=checkbox]:checked").length; if (len == checked_len) { $("#typeid-" + id).prop('checked', true); } else { $("#typeid-" + id).prop('checked', false); } } })
Jquery復(fù)選框全選和全不選
第一種方法
<!--實(shí)現(xiàn)td框全選th框自動(dòng)選的兩種方法: 1.根據(jù)已經(jīng)選擇的td框的數(shù)量,若全選則選 2.遍歷td框,若全選則選 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { margin: auto; } </style> <script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> <!--復(fù)選框全選全不選--> <script type="text/javascript"> //讓后面的復(fù)選框和第一個(gè)一致即可 function c(obj) { $(".cb").prop("checked", obj.checked) } //當(dāng)下面所有的復(fù)選框全選之后自動(dòng)選擇最上面的那個(gè)復(fù)選框 $(function() { $("table td :checkbox").click(function() { var c = $("table td :checkbox").length var len = $("table td :checked").length; $("table th :checkbox").prop("checked", c == len); }) }) </script> </head> <body> <table id="table" border="1" cellspacing="" cellpadding="" width="40%"> <tr id="trr"> <td> <button>刪除</button> </td> </tr> <tr id="tr1"> <th class="thclass"><input type="checkbox" onclick="c(this)" id="cb1" /></th> <th>分類ID</th> <th>分類名稱</th> <th>分類描述</th> <th>操作</th> </tr> <tr> <td class="thclass"><input type="checkbox" class="cb" /></td> <td>0</td> <td>手機(jī)數(shù)碼</td> <td>手機(jī)數(shù)碼類商品</td> <td> <a href="#">修改</a>| <a href="#">刪除</a> </td> </tr> <tr> <td class="thclass"><input type="checkbox" class="cb" /></td> <td>1</td> <td>電腦辦公</td> <td>電腦辦公類商品</td> <td> <a href="#">修改</a>| <a href="#">刪除</a> </td> </tr> <tr> <td class="thclass"><input type="checkbox" class="cb" /></td> <td>2</td> <td>鞋靴箱包</td> <td>鞋靴箱包類商品</td> <td> <a href="#">修改</a>| <a href="#">刪除</a> </td> </tr> <tr> <td class="thclass"><input type="checkbox" class="cb" /></td> <td>3</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td> <a href="#">修改</a>| <a href="#">刪除</a> </td> </tr> </table> <script> //表格顏色代碼 $("tr:even").css("background", "pink") $("tr:odd").css("background", "yellow") $("#tr1").css("background", "dimgray") $("#trr").css("background", "aliceblue") </script> </body> </html>
第二種方法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 --> <!-- 警告:通過(guò) file:// 協(xié)議(就是直接將 html 頁(yè)面拖拽到瀏覽器中)訪問(wèn)頁(yè)面時(shí) Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) --> <script src="js/jquery-1.11.0.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> /*實(shí)現(xiàn)全選和全不選*/ function a(obj) { $(".c").prop("checked", obj.checked) } /* $(function(){ var a=$("table td:checked").length; var b=$("table td:checkbox").length; if(a==b){ $(".c").prop("checked",true); }else{ alert(223) } })*/ $(function() { $("tbody input").click(function() { var a = $("#tb input").length; var b = $("#tb input:checked").length; $("th input").prop("checked", a == b) }) }) </script> </script> </head> <body> <h1>你好,世界!</h1> <!--改變表格寬度--> <!--方法一:利用div包裹(柵格系統(tǒng))--> <div class="container row=6"> <!--方法二:直接在table中用style設(shè)置長(zhǎng)寬--> <table class="table table-hover table-bordered"> <tr> <th><input type="checkbox" id="thc" onclick="a(this)" />全選</th> <th>學(xué)號(hào)</th> <th>姓名</th> <th>年齡</th> </tr> <tbody id="tb"> <tr> <td><input type="checkbox" class="c" /></td> <td>1001</td> <td>提莫</td> <td>20</td> </tr> <tr> <td><input type="checkbox" class="c" /></td> <td>1002</td> <td>德瑪</td> <td>52</td> </tr> <tr> <td><input type="checkbox" class="c" /></td> <td>1003</td> <td>奎因</td> <td>32</td> </tr> </tbody> </table> </div> </body> </html>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jqGrid翻頁(yè)時(shí)數(shù)據(jù)選中丟失問(wèn)題的解決辦法
我在項(xiàng)目中使用jqGrid時(shí),采用異步加載服務(wù)器數(shù)據(jù),例如點(diǎn)擊翻頁(yè)、搜索時(shí)都重新加載數(shù)據(jù)。這篇文章主要介紹了jqGrid翻頁(yè)時(shí)數(shù)據(jù)選中丟失問(wèn)題,需要的朋友可以參考下2017-02-02最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件,都有著非常炫酷的效果,十分的實(shí)用,這里推薦給大家。2015-07-07jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果,通過(guò)jquery遍歷及匹配頁(yè)面元素并動(dòng)態(tài)修改頁(yè)面元素樣式實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記(8種效果)
這篇文章分享了一份jquery動(dòng)畫(huà)效果學(xué)習(xí)筆記,針對(duì)jquery動(dòng)畫(huà)效果進(jìn)行細(xì)致解析,對(duì)淡入淡出效果、滑動(dòng)效果進(jìn)行原理講解,想要學(xué)好jquery動(dòng)畫(huà)效果,就耐心閱讀本文,相信大家會(huì)有意想不到的收獲。2015-11-11Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開(kāi)效果
這篇文章主要介紹了Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開(kāi)效果,需要的朋友可以參考下2017-10-10分析了一下JQuery中的extend方法實(shí)現(xiàn)原理
這篇文章主要介紹了通過(guò)jQuery.extend的源碼分析了一下JQuery中的extend方法實(shí)現(xiàn)原理以及使用方式,非常的詳細(xì),這里推薦給大家,有需要的小伙伴來(lái)參考下吧。2015-02-02