Bootstrap之表格checkbox复选框全选

效果图：

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

[html] view plain copy

  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样式表示。点击复选框所在单元格也能选中复选框。下面是完整代码和注释说明：

[html] view plain copy

  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>
时间： 2024-10-21 00:02:24

Bootstrap之表格checkbox复选框全选的相关文章

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

checkbox复选框全选批量删除

多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="FormName" onsubmit="return checkbox();"> <table > <tr ><td><input type="checkbox" name="checkboxes[]"

checkbox全选/全不选，子复选框全选父复选框选中

<input type="checkbox" class="optionListAll">/* 父复选框 */ <input type="checkbox" name="optionList"> <input type="checkbox" name="optionList"> <input type="checkbox" n

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

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

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

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

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

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

复选框全选/全部选

复选框全选/全部选 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function() { /* 全选按钮点击按钮以后,四个多选框全部被选中 */ // 为idcheckedAllBtn的按钮绑