Bootstrap实现表格复选框全选
来源:互联网 发布:龙蛇演义网络剧 编辑:程序博客网 时间:2024/04/30 22:49
最近在做一个后台页面,全部使用的Bootstrap,在此记录一下全选单选的做法。
效果图:
主要代码如下(正常表格布局):
$(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();
});
- Bootstrap实现表格复选框全选
- Bootstrap之表格checkbox复选框全选
- Bootstrap之表格checkbox复选框全选
- Bootstrap中表格内的checkbox复选框全选
- 复选框 实现全选
- Bootstrap之表格checkbox复选框全选(http://blog.csdn.net/shangmingchao)
- AngularJS 实现复选框 全选/取消全选
- gridView 复选框 实现全选
- 复选框实现全选删除
- JavaScript实现复选框全选
- JQuery各种选择器并实现定时显示隐藏、表格奇偶换色、复选框全选全不选、
- JQuery实现表格复选框
- DevExpress Gridcontrol 表格头复选框 全选全不选
- easyui表格复选框的全选键是否选中
- 用js实现复选框全选
- javascript实现复选框的全选功能
- 关于 js 实现复选框 全选
- js 实现 复选框全选与全不选
- C# Lambda表达式
- JavaWeb - Servlet开发
- 运用JS设置cookie、读取cookie、删除cookie
- 自定义ArrayList实现
- ubuntu环境下redis安装
- Bootstrap实现表格复选框全选
- 【OpenCV】SIFT特征提取
- shell编程之运算符
- 个人博客怎么选择域名
- C#中数组、ArrayList和List三者的区别
- 强连通缩点 scc 求最短路
- gradle相关网站以及几个常用网站
- iOS开发:App项目打包上传到App Store的步骤
- java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory