jquery和bootstrap获取checkbox选中的多行数据
在项目中,经常遇到,于是整理
引用bootstrap的js和css
代码解释:
$("#dgFlowList").find(":checkbox:checked").each(function(){
var val = $(this).parents("tr").text();
data.push(val);
});
代码:
<html>
<head>
<title>多选</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#select_button").on('click',function(){
var checkids = [];
var data = [];
$("input[name='ckb']:checked").each(function(i){
checkids[i] = $(this).val();
});
if(checkids.length<=0){
$.notify('请选择请假单',{status: "danger"});
}else{
console.log(checkids);
$("#dgFlowList").find(":checkbox:checked").each(function(){
var val = $(this).parents("tr").text();
data.push(val);
});
console.log(data);
}
});
}); function deleteCurrentRow(obj){
var tr=obj.parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild(tr);
//只剩行首时删除表格
if(tbody.rows.length==0) {
tbody.parentNode.removeChild(tbody);
}
}
</script> </head>
<body>
<table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList"
style="border-color:#CCCCCC;border-width:1px;border-style:solid;width:98%;border-collapse:collapse;MARGIN: 5px 0px">
<tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center">
<th></th><th>流程名称</th><th>表单名称</th><th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="ckb" value="1"></td>
<td style="width:35%;">请假单1</td>
<td style="width:35%;">请假单</td>
<td align="Center" style="width:20%;">
<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ckb" value="2"></td>
<td style="width:35%;">请假单2</td>
<td style="width:35%;">请假单</td>
<td align="Center" style="width:20%;">
<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ckb" value="3"></td>
<td style="width:35%;">请假单3</td>
<td style="width:35%;">请假单</td>
<td align="Center" style="width:20%;">
<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ckb" value="4"></td>
<td style="width:35%;">请假单4</td>
<td style="width:35%;">请假单</td>
<td align="Center" style="width:20%;">
<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" name="ckb" value="5"></td>
<td style="width:35%;">请假单5</td>
<td style="width:35%;">请假单</td>
<td align="Center" style="width:20%;">
<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
</td>
</tr>
</table>
<div align="center">
<button type="button" class="btn btn-primary" id="select_button"> 多选</button>
</div>
</body>
</html>
app.js代码,是为notify写的,于功能没有多大的关系
/**
* Notify Addon definition as jQuery plugin
* Adapted version to work with Bootstrap classes
* More information http://getuikit.com/docs/addons_notify.html
*/ (function ($, window, document) { var containers = {},
messages = {}, notify = function (options) { if ($.type(options) == 'string') {
options = {message: options};
} if (arguments[1]) {
options = $.extend(options, $.type(arguments[1]) == 'string' ? {status: arguments[1]} : arguments[1]);
} return (new Message(options)).show();
},
closeAll = function (group, instantly) {
if (group) {
for (var id in messages) {
if (group === messages[id].group) messages[id].close(instantly);
}
} else {
for (var id in messages) {
messages[id].close(instantly);
}
}
}; var Message = function (options) { var $this = this; this.options = $.extend({}, Message.defaults, options); this.uuid = "ID" + (new Date().getTime()) + "RAND" + (Math.ceil(Math.random() * 100000));
this.element = $([
// alert-dismissable enables bs close icon
'<div class="uk-notify-message alert-dismissable">',
'<a class="close">×</a>',
'<div>' + this.options.message + '</div>',
'</div>' ].join('')).data("notifyMessage", this); // status
if (this.options.status) {
this.element.addClass('alert alert-' + this.options.status);
this.currentstatus = this.options.status;
} this.group = this.options.group; messages[this.uuid] = this; if (!containers[this.options.pos]) {
containers[this.options.pos] = $('<div class="uk-notify uk-notify-' + this.options.pos + '"></div>').appendTo('body').on("click", ".uk-notify-message", function () {
$(this).data("notifyMessage").close();
});
}
}; $.extend(Message.prototype, { uuid: false,
element: false,
timout: false,
currentstatus: "",
group: false, show: function () { if (this.element.is(":visible")) return; var $this = this; containers[this.options.pos].show().prepend(this.element); var marginbottom = parseInt(this.element.css("margin-bottom"), 10); this.element.css({
"opacity": 0,
"margin-top": -1 * this.element.outerHeight(),
"margin-bottom": 0
}).animate({"opacity": 1, "margin-top": 0, "margin-bottom": marginbottom}, function () { if ($this.options.timeout) { var closefn = function () {
$this.close();
}; $this.timeout = setTimeout(closefn, $this.options.timeout); $this.element.hover(
function () {
clearTimeout($this.timeout);
},
function () {
$this.timeout = setTimeout(closefn, $this.options.timeout);
}
);
} }); return this;
}, close: function (instantly) { var $this = this,
finalize = function () {
$this.element.remove(); if (!containers[$this.options.pos].children().length) {
containers[$this.options.pos].hide();
} delete messages[$this.uuid];
}; if (this.timeout) clearTimeout(this.timeout); if (instantly) {
finalize();
} else {
this.element.animate({
"opacity": 0,
"margin-top": -1 * this.element.outerHeight(),
"margin-bottom": 0
}, function () {
finalize();
});
}
}, content: function (html) { var container = this.element.find(">div"); if (!html) {
return container.html();
} container.html(html); return this;
}, status: function (status) { if (!status) {
return this.currentstatus;
} this.element.removeClass('alert alert-' + this.currentstatus).addClass('alert alert-' + status); this.currentstatus = status; return this;
}
}); Message.defaults = {
message: "",
status: "normal",
timeout: 5000,
group: null,
pos: 'top-center'
}; $["notify"] = notify;
$["notify"].message = Message;
$["notify"].closeAll = closeAll; return notify; }(jQuery, window, document));
jquery和bootstrap获取checkbox选中的多行数据的更多相关文章
- jQuery获取checkbox选中项等操作及注意事项
jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...
- JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [开发笔记]-jQuery获取checkbox选中项等操作及注意事项
今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们. 1. 获取chec ...
- jquery设置和获得checkbox选中问题
1.设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox ...
- webform开发经验（一）：Asp.Net获取Checkbox选中的值
webform中获取repeat控件列表下的checkbox选中的值: 码农上代码: public static string getSelectedIDs(Repeater Rpt_) { stri ...
- php获取checkbox数组的表单数据
提交表单的时候,对于checkbox多选框,name="field[]",此时php获取的数组为:从0开始的索引数组:如果name="field[n]" 有数字 ...
- jQuery之获取checkbox选中的值
<mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!-- ...
- jquery 获取checkbox 选中值并拼接字符集
1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){ chk_val ...
- js jquery select 操作 获取值,选中选项,增加,修改,删除
select示例: <select id="sel"> <option value="1">one</option> < ...
随机推荐
- 【Cocos2dx 3.3 Lua】滚动字幕
参考资料: http://blog.csdn.net/jackystudio/article/details/12991977 1.原理 通过调用update来更新位置达到 ...
- 【转】 Oracle 用户权限管理方法
sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 sys;//系统管理员,拥有最高权限 system;//本地管 ...
- 机器学习理论基础学习18---高斯过程回归(GPR)
一.高斯(分布)过程(随机过程)是什么? 一维高斯分布 多维高斯分布 无限维高斯分布 高斯网络 高斯过程 简单的说,就是一系列关于连续域(时间或空间)的随机变量的联合,而且针对每一个时间或是空间点 ...
- Postman使用js获取日期
在用postman进行接口自动化测试的时候,某个查询接口需要使用到日期参数进行请求: 假设当前日期为2018-05-07 10:30:20 ,需要传的日期为: beginTime:2018-05-01 ...
- 基于Axis1.4的webservice接口开发（环境搭建）
基于Axis1.4的webservice接口开发(环境搭建) 一.环境搭建: 1.搜索关键字“Axis1.4”下载Axis1.4相关的jar包. 下载地址:http://download.csdn.n ...
- Linux服务器---关闭selinux
关闭selinux 1.通过命令“getenforce”获取selinux状态, [root@localhost ~]# getenforce Enforcing //enforcein ...
- 让前端独立于后端进行开发，模拟数据生成器Mock.js
让前端独立于后端进行开发,模拟数据生成器Mock.jsMock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. Home · nuysoft/Mock Wiki ...
- DNS服务器原理介绍（一）
DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串.通过主机名,最终 ...
- python之路----logging模块
函数式简单配置 import logging logging.debug('debug message') #bug logging.info('info message') #信息 logging. ...
- 在python3下使用OpenCV 显示图像
在Python3下用使用OpenCV比在C,C++里开发不止快捷一点点, 原型开发的时候蛮有用. 这里用的OpenCV 加载图片, 用的imshow画图 # -*- coding: utf-8 -*- ...