转：http://blog.csdn.net/shangmingchao【商明超的博客】

效果图：

HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：

版权声明：如需转载，请标明出处：http://blog.csdn.net/shangmingchao【商明超的博客】

效果图：

HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了：

[html] view plain copy

<table class="table table-bordered table-hover">

    <thead>

        <tr class="success">

            <th>类别编号</th>

            <th>类别名称</th>

            <th>类别组</th>

            <th>状态</th>

            <th>说明</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>C00001</td>

            <td>机车</td>

            <td>机车</td>

            <td>有效</td>

            <td>机车头</td>

        </tr>

        <tr>

            <td>C00002</td>

            <td>车厢</td>

            <td>机车</td>

            <td>有效</td>

            <td>载客车厢</td>

        </tr>

    </tbody>

</table>

重点是JS的实现。复选框很小，不容易点到，所以点击每一行也可以选中该行，并用高亮一些CSS样式表示。点击复选框所在单元格也能选中复选框。下面是完整代码和注释说明：

[html] view plain copy

<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

        <title>表格</title>

        <meta name="keywords" content="表格">

        <meta name="description" content="这真的是一个表格" />

        <meta name="HandheldFriendly" content="True" />

        <link rel="shortcut icon" href="img/favicon.ico">

        <!-- Bootstrap3.3.5 CSS -->

        <link href="css/bootstrap.min.css" rel="stylesheet">  

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

        <!--[if lt IE ]>

            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

    </head>  

    <body>

        <div class="panel-group">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    列表

                </div>

                <div class="panel-body">

                    <div class="list-op" id="list_op">

                        <button type="button" class="btn btn-default btn-sm">

                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增

                        </button>

                        <button type="button" class="btn btn-default btn-sm">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改

                        </button>

                        <button type="button" class="btn btn-default btn-sm">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除

                        </button>

                    </div>

                </div>

                <table class="table table-bordered table-hover">

                    <thead>

                        <tr class="success">

                            <th>类别编号</th>

                            <th>类别名称</th>

                            <th>类别组</th>

                            <th>状态</th>

                            <th>说明</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>C00001</td>

                            <td>机车</td>

                            <td>机车</td>

                            <td>有效</td>

                            <td>机车头</td>

                        </tr>

                        <tr>

                            <td>C00002</td>

                            <td>车厢</td>

                            <td>机车</td>

                            <td>有效</td>

                            <td>载客车厢</td>

                        </tr>

                    </tbody>

                </table>

                <div class="panel-footer">

                    <nav>

                        <ul class="pagination pagination-sm">

                            <li class="disabled">

                                <a href="#" aria-label="Previous">

                                    <span aria-hidden="true">«</span>

                                </a>

                            </li>

                            <li class="active"><a href="#"></a></li>

                            <li><a href="#"></a></li>

                            <li><a href="#"></a></li>

                            <li><a href="#"></a></li>

                            <li><a href="#"></a></li>

                            <li>

                                <a href="#" aria-label="Next">

                                    <span aria-hidden="true">»</span>

                                </a>

                            </li>

                        </ul>

                    </nav>

                </div><!-- end of panel-footer -->

            </div><!-- end of panel -->

        </div>

        <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->

        <script src="js/jquery-1.11.3.min.js "></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->

        <script src="js/bootstrap.min.js "></script>

        <script>

        $(function(){

            function initTableCheckbox() {

                var $thr = $('table thead tr');

                var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');

                /*将全选/反选复选框添加到表头最前，即增加一列*/

                $thr.prepend($checkAllTh);

                /*“全选/反选”复选框*/

                var $checkAll = $thr.find('input');

                $checkAll.click(function(event){

                    /*将所有行的选中状态设成全选框的选中状态*/

                    $tbr.find('input').prop('checked',$(this).prop('checked'));

                    /*并调整所有选中行的CSS样式*/

                    if ($(this).prop('checked')) {

                        $tbr.find('input').parent().parent().addClass('warning');

                    } else{

                        $tbr.find('input').parent().parent().removeClass('warning');

                    }

                    /*阻止向上冒泡，以防再次触发点击操作*/

                    event.stopPropagation();

                });

                /*点击全选框所在单元格时也触发全选框的点击操作*/

                $checkAllTh.click(function(){

                    $(this).find('input').click();

                });

                var $tbr = $('table tbody tr');

                var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');

                /*每一行都在最前面插入一个选中复选框的单元格*/

                $tbr.prepend($checkItemTd);

                /*点击每一行的选中复选框时*/

                $tbr.find('input').click(function(event){

                    /*调整选中行的CSS样式*/

                    $(this).parent().parent().toggleClass('warning');

                    /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/

                    $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);

                    /*阻止向上冒泡，以防再次触发点击操作*/

                    event.stopPropagation();

                });

                /*点击每一行时也触发该行的选中操作*/

                $tbr.click(function(){

                    $(this).find('input').click();

                });

            }

            initTableCheckbox();

        });

        </script>

    </body>  

</html>

转载：Bootstrap之表格checkbox复选框全选的更多相关文章

  1. Jquery表格变色 复选框全选，反选

    /*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...

  2. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  3. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  4. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  5. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  6. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  7. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  10. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

随机推荐

  1. IIS7下ajax报未定义错误

    项目之前在iis6环境下运行的很好,今天在WIN7下发布,结果居然报对象未定义错误,经过个把小时折腾,终于弄清楚原委. 在web.config中关于AjaxPro的设置,在IIS7.0(WIN7中使用 ...

  2. OC的封装、继承与多态

    面向对象有三大特征:封装.继承和多态. 一.封装 封装是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部信息,而是通过该类所提供的方法来实现对内部信息的操作和访问.简而言之,信息隐藏,隐 ...

  3. javascript模式之模块模式

    使用模式来组织代码有很多优点:使代码的结构更清晰,逻辑性更强,更容易维护.还可以避免很多错误. 首先,在javascript主要分为两大类: 编程模式-- 一些专门为javascript语言开发出的最 ...

  4. ES6 学习笔记(1)

    恰逢换工作之际,新公司的是以 ES6 + webpack + vue 为技术栈, 正好ES6是我下个学习目标, 因此买了阮老师的 ES6标准入门,也当是支持阮老师了. 笔记将会照着这本书的阅读展开而做 ...

  5. 运行R 报错R cannot R_TempDir， 继而发现/dev/mapper/VG00-LV01 磁盘空间已满

    今天在运行R脚本的时候报了个错:Fatal error: cannot create 'R_TempDir'.排除了是自己写的代码的问题,想着应该是某个没见过的原因,google之,发现网上的说法是/ ...

  6. 解决低版本chrome浏览器不支持es6 Array.find()

     if (!Array.prototype.find) {  Array.prototype.find = function(predicate) {    'use strict';    if ( ...

  7. XML.03-DOM和SAX解析

    body,td { font-family: calibri; font-size: 10pt } XML.03-DOM和SAX解析 XML的DOM解析 解析 处理 回写 XML的SAX解析 SAX和 ...

  8. SQL Server 数据库的维护(三)__事务(transaction)和锁

    --维护数据库-- --事务(transaction)和锁-- --事务(transaction)-- --概述: 事务是指封装了一组T-SQL语句的单个逻辑单元.单元中的所有语句作为一个整体,在满足 ...

  9. table 细边框

    table { border-collapse: collapse; border: none; width: 200px; } td { border: solid #000 1px; }

  10. CCS3.3下执行优化

    最近想研究一下CCS下的程序优化,之前也了解一些,现在查阅一下资料,整理一下. 当然优化有很多种,我本次先说的是执行优化方式. 首先打开我们自己的工程.工程文件若显示为黄色的,则表示此文件默认优化选项 ...