实现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>