Jquery實(shí)現(xiàn)多個(gè)表格的全選復(fù)選框功能方式
更新時(shí)間：2022年12月01日 08:48:51 作者：再※見(jiàn)了＆單純，！
這篇文章主要介紹了Jquery實(shí)現(xiàn)多個(gè)表格的全選復(fù)選框功能方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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
這篇文章主要介紹了jquery操作select方法,實(shí)例匯總了jQuery操作select的讀取、設(shè)置、添加及刪除等技巧,需要的朋友可以參考下2015-02-02
最新最熱最實(shí)用的15個(gè)jQuery插件匯總
本文給大家匯總介紹了2015年7月最新發(fā)布的最熱最實(shí)用的15款jQuery插件，都有著非常炫酷的效果，十分的實(shí)用，這里推薦給大家。2015-07-07
一直以來(lái)，都對(duì)JS獲取元素的位置感到非常的困惑：一會(huì)client、一會(huì)offset、一會(huì)scroll。再加上各大瀏覽器之間的不兼容，唉，搞得哥暈暈乎乎的。2011-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)視頻展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
jquery實(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-08
jquery動(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-11
Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開(kāi)效果
這篇文章主要介紹了Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開(kāi)效果,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06
分析了一下JQuery中的extend方法實(shí)現(xiàn)原理
這篇文章主要介紹了通過(guò)jQuery.extend的源碼分析了一下JQuery中的extend方法實(shí)現(xiàn)原理以及使用方式，非常的詳細(xì)，這里推薦給大家，有需要的小伙伴來(lái)參考下吧。2015-02-02