大家好，程序猿蛋蛋哥，今天为大家带来一个前端小知识点：页面table行中嵌入checkbox，如何实现全选？
table_select_checkbox.gif
一、基于传统的HTML实现方式(非插件)
实现思路：
- 表头的
checkbox选中后，触发table表行中的checkbox都选中
// 全选 or 全取消
$('#checkAll').click(function(event) {
var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
tr_checkbox.prop('checked', $(this).prop('checked'));
// 阻止向上冒泡，以防再次触发点击操作
event.stopPropagation();
});
说明：checkAll为表头checkbox的id，即：<input type="checkbox" id="checkAll"/>
- 当
table表行中所有选中的checkbox数 =table表的行数时，则将表头id=‘checkAll’的单选框置为选中，否则置为未选中。
$('table tbody tr').find('input[type=checkbox]').click(function(event) {
var tbr = $('table tbody tr');
$('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
// 阻止向上冒泡，以防再次触发点击操作
event.stopPropagation();
});
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>table中checkbox框全选</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" id="checkAll"/>
</th>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1000</td>
<td>Jack</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1001</td>
<td>Lucy</td>
<td>30</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>1002</td>
<td>Lilei</td>
<td>12</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$(function(){
// 全选 or 全取消
$('#checkAll').click(function(event) {
var tr_checkbox = $('table tbody tr').find('input[type=checkbox]');
tr_checkbox.prop('checked', $(this).prop('checked'));
// 阻止向上冒泡，以防再次触发点击操作
event.stopPropagation();
});
// 点击表格每一行的checkbox，表格所有选中的checkbox数 = 表格行数时，则将表头的‘checkAll’单选框置为选中，否则置为未选中
$('table tbody tr').find('input[type=checkbox]').click(function(event) {
var tbr = $('table tbody tr');
$('#checkAll').prop('checked', tbr.find('input[type=checkbox]:checked').length == tbr.length ? true : false);
// 阻止向上冒泡，以防再次触发点击操作
event.stopPropagation();
});
// 点击表格行(行内任意位置)，触发选中或取消选中该行的checkbox
$('table tbody tr').click(function() {
$(this).find('input[type=checkbox]').click();
});
});
</script>
</body>
</html>
二、基于bootstrap-table插件的实现方式
实现效果：
bootstrap-table_select_checkbox.gif
实现方法：
- 引入css样式和js插件
在head中引入css样式：调换顺序不影响（实际试验过），一般还是按照先bootstap，后bootstrap-table
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
</head>
在body中引入js插件：顺序为：先jquery，后bootstrap，最后bootstrap-table
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
</body>
- 表头
<th>中配置data-check="true"
<th data-checkbox="true"></th>
Bootstrap-table官网示例：https://examples.bootstrap-table.com/index.html#column-options/checkbox.html
附上完整代码：
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<title>基于bootstrap-table实现的checkbox框全选</title>
</head>
<body>
<table id="table" data-toggle="table" data-height="460" data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
<thead>
<tr>
<th data-checkbox="true"></th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
</body>
</html>
扩展：
- 如果不想要表头的
checkbox框，则在<table>中配置data-checkbox-header="false"
<table id="table" data-toggle="table" data-height="460" data-checkbox-header="false"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>
- 实现点击表格行（行内任意位置），触发选中或者取消选中该行的
checkbox，则在<table>中配置data-click-to-select="true"
<table id="table" data-toggle="table" data-height="460" data-checkbox-header="false" data-click-to-select="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>
实现的效果图：
bootstrap-table_checkbox-header.png
Bootstrap-table官网示例：https://examples.bootstrap-table.com/index.html#options/checkbox-header.html
