转自: http://blog.csdn.net/shangmingchao/article/details/49761315

效果图：

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

  1. <table class="table table-bordered table-hover">
  2. <thead>
  3. <tr class="success">
  4. <th>类别编号</th>
  5. <th>类别名称</th>
  6. <th>类别组</th>
  7. <th>状态</th>
  8. <th>说明</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td>C00001</td>
  14. <td>机车</td>
  15. <td>机车</td>
  16. <td>有效</td>
  17. <td>机车头</td>
  18. </tr>
  19. <tr>
  20. <td>C00002</td>
  21. <td>车厢</td>
  22. <td>机车</td>
  23. <td>有效</td>
  24. <td>载客车厢</td>
  25. </tr>
  26. </tbody>
  27. </table>

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

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    8. <title>表格</title>
    9. <meta name="keywords" content="表格">
    10. <meta name="description" content="这真的是一个表格" />
    11. <meta name="HandheldFriendly" content="True" />
    12. <link rel="shortcut icon" href="img/favicon.ico">
    13. <!-- Bootstrap3.3.5 CSS -->
    14. <link href="css/bootstrap.min.css" rel="stylesheet">
    15. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    16. <!--[if lt IE 9]>
    17. <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    18. <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    19. <![endif]-->
    20. </head>
    21. <body>
    22. <div class="panel-group">
    23. <div class="panel panel-primary">
    24. <div class="panel-heading">
    25. 列表
    26. </div>
    27. <div class="panel-body">
    28. <div class="list-op" id="list_op">
    29. <button type="button" class="btn btn-default btn-sm">
    30. <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    31. </button>
    32. <button type="button" class="btn btn-default btn-sm">
    33. <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    34. </button>
    35. <button type="button" class="btn btn-default btn-sm">
    36. <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    37. </button>
    38. </div>
    39. </div>
    40. <table class="table table-bordered table-hover">
    41. <thead>
    42. <tr class="success">
    43. <th>类别编号</th>
    44. <th>类别名称</th>
    45. <th>类别组</th>
    46. <th>状态</th>
    47. <th>说明</th>
    48. </tr>
    49. </thead>
    50. <tbody>
    51. <tr>
    52. <td>C00001</td>
    53. <td>机车</td>
    54. <td>机车</td>
    55. <td>有效</td>
    56. <td>机车头</td>
    57. </tr>
    58. <tr>
    59. <td>C00002</td>
    60. <td>车厢</td>
    61. <td>机车</td>
    62. <td>有效</td>
    63. <td>载客车厢</td>
    64. </tr>
    65. </tbody>
    66. </table>
    67. <div class="panel-footer">
    68. <nav>
    69. <ul class="pagination pagination-sm">
    70. <li class="disabled">
    71. <a href="#" aria-label="Previous">
    72. <span aria-hidden="true">«</span>
    73. </a>
    74. </li>
    75. <li class="active"><a href="#">1</a></li>
    76. <li><a href="#">2</a></li>
    77. <li><a href="#">3</a></li>
    78. <li><a href="#">4</a></li>
    79. <li><a href="#">5</a></li>
    80. <li>
    81. <a href="#" aria-label="Next">
    82. <span aria-hidden="true">»</span>
    83. </a>
    84. </li>
    85. </ul>
    86. </nav>
    87. </div><!-- end of panel-footer -->
    88. </div><!-- end of panel -->
    89. </div>
    90. <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
    91. <script src="js/jquery-1.11.3.min.js "></script>
    92. <!-- Include all compiled plugins (below), or include individual files as needed -->
    93. <script src="js/bootstrap.min.js "></script>
    94. <script>
    95. $(function(){
    96. function initTableCheckbox() {
    97. var $thr = $('table thead tr');
    98. var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
    99. /*将全选/反选复选框添加到表头最前，即增加一列*/
    100. $thr.prepend($checkAllTh);
    101. /*“全选/反选”复选框*/
    102. var $checkAll = $thr.find('input');
    103. $checkAll.click(function(event){
    104. /*将所有行的选中状态设成全选框的选中状态*/
    105. $tbr.find('input').prop('checked',$(this).prop('checked'));
    106. /*并调整所有选中行的CSS样式*/
    107. if ($(this).prop('checked')) {
    108. $tbr.find('input').parent().parent().addClass('warning');
    109. } else{
    110. $tbr.find('input').parent().parent().removeClass('warning');
    111. }
    112. /*阻止向上冒泡，以防再次触发点击操作*/
    113. event.stopPropagation();
    114. });
    115. /*点击全选框所在单元格时也触发全选框的点击操作*/
    116. $checkAllTh.click(function(){
    117. $(this).find('input').click();
    118. });
    119. var $tbr = $('table tbody tr');
    120. var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
    121. /*每一行都在最前面插入一个选中复选框的单元格*/
    122. $tbr.prepend($checkItemTd);
    123. /*点击每一行的选中复选框时*/
    124. $tbr.find('input').click(function(event){
    125. /*调整选中行的CSS样式*/
    126. $(this).parent().parent().toggleClass('warning');
    127. /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
    128. $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
    129. /*阻止向上冒泡，以防再次触发点击操作*/
    130. event.stopPropagation();
    131. });
    132. /*点击每一行时也触发该行的选中操作*/
    133. $tbr.click(function(){
    134. $(this).find('input').click();
    135. });
    136. }
    137. initTableCheckbox();
    138. });
    139. </script>
    140. </body>
    141. </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. javascript基础DOM操作

    DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...

  2. DBA

    一个公司的数据库系统也是由DBA 来进行管理的,它们的主要工作如下: l 安装和配置数据库,创建数据库以及帐户:l 监视数据库系统,保证数据库不宕机:l 收集系统统计和性能信息以便进行调整:l 发现性 ...

  3. 走进WCF一 （异常如此多娇，引无数码农竞折煞）

    对于WCF一直都是只知其然,公司框架的架构者也只是对我们授之以鱼,而不授之以渔. 带着初学者的态度进入了大神Artech的博客,逐步慢慢上手. 我的解决方案(和大神的一模一样,只是过程中一波三折的) ...

  4. python--threading多线程总结

    threading用于提供线程相关的操作,线程是应用程序中工作的最小单元.python当前版本的多线程库没有实现优先级.线程组,线程也不能被停止.暂停.恢复.中断. threading模块提供的类:  ...

  5. CGAL Manual/tutorial_hello_world.html

    Hello World Author CGAL Editorial Board 本教程是为知道C++和几何算法的基本知识的CGAL新手准备的.第一节展示了如何特化点和段CGAL类,以及如何应用几何谓词 ...

  6. An error occurred while collecting items to be installed session context was:(profile=DefaultProfile... 解决方案

    遇到同样问题的小伙伴请:点击Eclipse上方工具栏中help --> Install new software... --> 看图 点击进红框的位置在打开的窗口中,将窗口右侧的Avail ...

  7. 【toplink】 位居第一的Java对象关系可持续性体系结构

    TopLink,是位居第一的Java对象关系可持续性体系结构,原署WebGain公司的产品,后被Oracle收购,并重新包装为Oracle AS TopLink.TOPLink为在关系数据库表中存储 ...

  8. 【Error listenerStart】 Error listenerStart Context [] startup failed due to previous errors

    发给 报错信息 八月 12, 2015 11:58:19 上午 org.apache.coyote.AbstractProtocol start 信息: Starting ProtocolHandle ...

  9. 【web安全】第六弹：手工SQL注入详解

    前一段时间,在对SQL注入有了新的理解之后,写了这篇文章.本来准备投稿,因为内容过于基础被打回来了,想想屯着也没意思,发出来发出来~~本来有好多图的,但是博客园发图很麻烦,word文档的链接会贴在文章 ...

  10. vue-cli + webpack

    vue-cli + webpack 关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你 ...