在项目中,经常遇到,于是整理

引用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">&times;</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选中的多行数据的更多相关文章

  1. jQuery获取checkbox选中项等操作及注意事项

    jQuery获取checkbox选中项等操作及注意事项 今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下 ...

  2. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [开发笔记]-jQuery获取checkbox选中项等操作及注意事项

    今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们. 1. 获取chec ...

  4. jquery设置和获得checkbox选中问题

    1.设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox ...

  5. webform开发经验（一）：Asp.Net获取Checkbox选中的值

    webform中获取repeat控件列表下的checkbox选中的值: 码农上代码: public static string getSelectedIDs(Repeater Rpt_) { stri ...

  6. php获取checkbox数组的表单数据

    提交表单的时候,对于checkbox多选框,name="field[]",此时php获取的数组为:从0开始的索引数组:如果name="field[n]" 有数字 ...

  7. jQuery之获取checkbox选中的值

    <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!-- ...

  8. jquery 获取checkbox 选中值并拼接字符集

    1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){   chk_val ...

  9. js jquery select 操作 获取值,选中选项,增加,修改,删除

    select示例: <select id="sel"> <option value="1">one</option> < ...

随机推荐

  1. iota 币产生私钥的方法

    iota 币的官网是 iota.org,   iota 的官网推荐的钱包地址是: https://github.com/iotaledger/wallet    iota 币产生私钥是没有什么特殊的要 ...

  2. Git warning：LF will be replaced by CRLF in readme.txt的原因与解决方案

    今天用Git bash遇到的问题,看了几个回答之后发现一个比较有价值的,给大家分享一下,其他很多的回答都有很或多或少存在一些弊端. 原回答地址在stackoverflow上,附上链接--http:// ...

  3. PAT Sign In and Sign Out[非常简单]

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  4. 蒙特卡洛模拟（Monte Carlo simulation）

    1.蒙特卡罗模拟简介 蒙特卡罗模拟,也叫统计模拟,这个术语是二战时期美国物理学家Metropolis执行曼哈顿计划的过程中提出来的,其基本思想很早以前就被人们所发现和利用.早在17世纪,人们就知道用事 ...

  5. python start

    由于工作关系,新学习使用了python,感觉能非常快速和方便的开发,看完<简明 Python 教程>就跃跃欲试,实际用的是发现有些和C#的理解不一样 (1)如何筛选元组 例如  recor ...

  6. C# 拼接字符串的几种方式和性能

    开发过程中常用到的拼接字符串的方法有三种: 1 简单 “+=” 拼接法 1 2 3 4 5 string str="a";   str+="c"+"d ...

  7. Geometry

    uva1473 这题说的是 在空间中给了n个点 然后用体积最小的圆锥将这些点包含在内可以在表面上, 将这些点 映射到xoz平面上然后,然后枚举每个上凸包的边和每个点的极值进行判断求得最小的体积 我们会 ...

  8. c# 模拟get请求例子，演示Session会话状态。

    创建一个控制台 程序: using System; using System.Collections.Generic; using System.IO; using System.IO.Compres ...

  9. mysql下的将多个字段名的值复制到另一个字段名中（批量更新数据）字符串拼接cancat实战例子

    mysql下的将多个字段名的值复制到另一个字段名中(批量更新数据)mysql字符串拼接cancat实战例子: mysql update set 多个字段相加,如果是数字相加可以直接用+号(注:hund ...

  10. office2007-安装程序找不到office.zh-cn\*.文件

    在同时安装vs2008 和 office2007 有可能会遇到个问题(如果现在安装office2007,在安装vs2008 不会出现问题, 反正会出现下面问题) 在安装office2007时总是提示“ ...