实现bootstrap表格的选择框（checkbox）的全选和单选功能
实现的方法是从网上论坛看到的，然后根据自己情况写来用的。table里面的checkbox选择框是在html里面就写好了，不是后期用js代码插入进去的。效果预览图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table表格的选择功能</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table.table tr th,
td {
text-align: center;
cursor: pointer;
}
</style>
</head>
<body class="container">
<div class=".table-responsive">
<!--<button id="btn" class="btn btn-primary">按钮</button>-->
<br>
<br>
<table id="" class="table table-hover table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
</th>
<th>部门名称</th>
<th>部门负责人</th>
<th>联系电话</th>
<th>地址</th>
<th>操作列</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="html" lay-skin="primary" lay-filter="allChoose">
</td>
<td>信息部</td>
<td>张三</td>
<td>1395464646</td>
<td>XX市XX区</td>
<td>编辑</td>
</tr>
<tr>
<td>
<input type="checkbox" name="css" lay-skin="primary" lay-filter="allChoose">
</td>
<td>财务部</td>
<td>李四</td>
<td>1785454646</td>
<td>湖北省</td>
<td>添加</td>
</tr>
<tr>
<td>
<input type="checkbox" name="javascript" lay-skin="primary" lay-filter="allChoose">
</td>
<td>业务部</td>
<td>王五</td>
<td>13246231</td>
<td>湖南省</td>
<td>删除</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
// $(function () {
// $("#btn").on('click', function () {
// var rows = $("table").find('tbody input[type="checkbox"]');
// console.log(rows);
// var ids = [];
// rows.each(function (item, index) {
// if (index.checked) {
// ids.push(index.name);
// }
// });
// console.log(ids);
// });
// });
$(function () {
checkBox();
function checkBox() {
var $thr = $("table thead tr"); //表格头部的tr
var $checkAllTh = $("table thead tr").find('input').parent(); //表格头部的的全选按钮
var $tbr = $("table tbody tr"); //表格内容的tr
var $checkAll = $thr.find('input'); //表格头部的全选框
//全选
$checkAll.click(function (event) {
//根据表格头部（thead）的全选框的是否选中的状态（true或false）来设置表格内容（tbody）的选择框状态
$tbr.find('input').prop('checked', $(this).prop('checked'));
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('danger');
} else {
$tbr.find('input').parent().parent().removeClass('danger');
}
//防止点击事件向父元素冒泡 必须加阻止事件冒泡，不然会出现单击全选框按钮无作用的情况
event.stopPropagation();
});
//点击表格头部全选框所在的单元格时也触发全选框的点击操作
$checkAllTh.click(function () {
$(this).find('input').click();
});
//点击表格内容（tbody）下面的每一行的选择框
$tbr.find('input').click(function (event) {
//给选中和未选中，添加和删除样式
$(this).parent().parent().toggleClass('danger');
//判断tbody里面的已经选中的input长度和表格内容本有的input长度是有相等，如果相等，则把theard的选择框置为选中，
$checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.find('input').length ?
true : false);
event.stopPropagation(); //防止点击事件向父元素冒泡 必须加阻止事件冒泡，不然会出现单击每一行内容的选框按钮无作用的情况
});
//点击tbody下面的每一行（非选择框）也能触发选择框的点击操作
$tbr.click(function () {
$(this).find('input').click();
});
}
})
</script>
浙公网安备 33010602011771号