Jquery實現(xiàn)多個表格的全選復選框功能方式
更新時間:2022年12月01日 08:48:51 作者:再※見了&單純,!
這篇文章主要介紹了Jquery實現(xiàn)多個表格的全選復選框功能方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
Jquery多個表格的全選復選框功能
實現(xiàn)多個表格的復選框功能
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中國近代史綱要 </td> </tr> <tr> <td><input type="checkbox" class="check"></td> <td> 2021年10月自考03708中國近代史綱要 </td> </tr> </tbody> </table>
JS部分
$(function () { //點擊全選按鈕 $(".checkall").on('click', function () { //獲取到當前全選按鈕的data-typeid let id = $(this).attr("data-typeid"); //將獲取到的data-typeid拼接給type-,并找到下面所有的復選框?qū)⑵錉顟B(tài)改變 $("#type-" + id).find("input[type=checkbox]").prop('checked', this.checked); }) //點擊復選框單選 $('.check').on('click',function () { //獲取當前點擊的check父級的data-typeid let id = $(this).parents("tbody").attr("data-typeid"); common(id); event.stopPropagation(); }) //點擊一行選中復選框 $('tr').click(function () { //獲取當前點擊的tr父級的data-typeid let id = $(this).parents("tbody").attr("data-typeid"); //獲取當前點擊tr里面復選框的狀態(tài) var isChecked = $(this).find("input[type=checkbox]").prop('checked'); //改變當前點擊tr里面復選框的狀態(tài) $(this).find("input[type=checkbox]").prop('checked', !isChecked); common(id); }) function common (id){ //獲取當前$("#type-" + id)下復選框的長度 let len = $("#type-" + id).find("input[type=checkbox]").length; //獲取當前$("#type-" + id)下復選框選中的長度 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復選框全選和全不選
第一種方法
<!--實現(xiàn)td框全選th框自動選的兩種方法: 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> <!--復選框全選全不選--> <script type="text/javascript"> //讓后面的復選框和第一個一致即可 function c(obj) { $(".cb").prop("checked", obj.checked) } //當下面所有的復選框全選之后自動選擇最上面的那個復選框 $(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>手機數(shù)碼</td> <td>手機數(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個meta標簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 --> <!-- 警告:通過 file:// 協(xié)議(就是直接將 html 頁面拖拽到瀏覽器中)訪問頁面時 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ù)需要只加載單個插件。 --> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> /*實現(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設置長寬--> <table class="table table-hover table-bordered"> <tr> <th><input type="checkbox" id="thc" onclick="a(this)" />全選</th> <th>學號</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>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jqGrid翻頁時數(shù)據(jù)選中丟失問題的解決辦法
我在項目中使用jqGrid時,采用異步加載服務器數(shù)據(jù),例如點擊翻頁、搜索時都重新加載數(shù)據(jù)。這篇文章主要介紹了jqGrid翻頁時數(shù)據(jù)選中丟失問題,需要的朋友可以參考下2017-02-02jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果
這篇文章主要介紹了jquery實現(xiàn)點擊向下展開菜單項(伸縮導航)效果,通過jquery遍歷及匹配頁面元素并動態(tài)修改頁面元素樣式實現(xiàn)該功能,需要的朋友可以參考下2015-08-08分析了一下JQuery中的extend方法實現(xiàn)原理
這篇文章主要介紹了通過jQuery.extend的源碼分析了一下JQuery中的extend方法實現(xiàn)原理以及使用方式,非常的詳細,這里推薦給大家,有需要的小伙伴來參考下吧。2015-02-02