jquery和bootstrap获取checkbox选中的多⾏数据在项⽬中，经常遇到，于是整理
引⽤bootstrap的js和css
代码解释:
$("#dgFlowList").find(":checkbox:checked").each(function(){
  var val = $(this).parents("tr").text();
  data.push(val);
});
代码:
1<html>
2<head>
3<title>多选</title>
4<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
5<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
6<script src="js/jquery.min.js"></script>
7<script src="js/app.js"></script>
8<script src="bootstrap/js/bootstrap.js"></script>
9<script type="text/javascript">
10        $(document).ready(function () {
11                $("#select_button").on('click',function(){
12var checkids = [];
13var data = [];
14                $("input[name='ckb']:checked").each(function(i){
15                    checkids[i] = $(this).val();
16                });
17if(checkids.length<=0){
18                    $.notify('请选择请假单',{status: "danger"});
19                }else{
20                        console.log(checkids);
21                        $("#dgFlowList").find(":checkbox:checked").each(function(){
22var val = $(this).parents("tr").text();
23                        data.push(val);
24                    });
25                    console.log(data);
26                }
27            });
28        });
29
30function deleteCurrentRow(obj){
31var tr=obj.parentNode.parentNode;
32var tbody=tr.parentNode;
33            veChild(tr);
34//只剩⾏⾸时删除表格
ws.length==0) {
36                veChild(tbody);
js arguments
37            }
38        }
39</script>
40
41</head>
42<body>
43<table cellspacing="0" rules="all" bordercolor="#CCCCCC" border="1" id="dgFlowList"
44    >
45<tr class="DataGrid_HeaderStyle" nowrap="nowrap" align="Center">
46<th></th><th>流程名称</th><th>表单名称</th><th>操作</th>
47</tr>
48<tr>
49<td><input type="checkbox" name="ckb" value="1"></td>
50<td >请假单1</td>
51<td >请假单</td>
52<td align="Center" >
53<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
54</td>
55</tr>
56<tr>
57<td><input type="checkbox" name="ckb" value="2"></td>
58<td >请假单2</td>
59<td >请假单</td>
60<td align="Center" >
61<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
62</td>
63</tr>
64<tr>
65<td><input type="checkbox" name="ckb" value="3"></td>
66<td >请假单3</td>
67<td >请假单</td>
68<td align="Center" >
69<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
70</td>
71</tr>
72<tr>
73<td><input type="checkbox" name="ckb" value="4"></td>
74<td >请假单4</td>
75<td >请假单</td>
76<td align="Center" >
77<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
78</td>
79</tr>
80<tr>
81<td><input type="checkbox" name="ckb" value="5"></td>
82<td >请假单5</td>
83<td >请假单</td>
84<td align="Center" >
85<a href="javascript:;" onclick='deleteCurrentRow(this)'>删除</a>
86</td>
87</tr>
88</table>
89<div align="center">
90<button type="button" class="btn btn-primary" id="select_button">多选</button>
91</div>
92</body>
93</html>
app.js代码，是为notify写的，于功能没有多⼤的关系
1/**
2 * Notify Addon definition as jQuery plugin
3 * Adapted version to work with Bootstrap classes
4 * More information getuikit/docs/addons_notify.html
5*/
6
7 (function ($, window, document) {
8
9var containers = {},
10        messages = {},
11
12        notify = function (options) {
13
14if ($.type(options) == 'string') {
15                options = {message: options};
16            }
17
18if (arguments[1]) {
19                options = $.extend(options, $.type(arguments[1]) == 'string' ? {status: arguments[1]} : arguments[1]);
20            }
21
22return (new Message(options)).show();
23        },
24        closeAll = function (group, instantly) {
25if (group) {
26for (var id in messages) {
27if (group === messages[id].group) messages[id].close(instantly);
28                }
29            } else {
30for (var id in messages) {
31                    messages[id].close(instantly);
32                }
33            }
34        };
35
36var Message = function (options) {
37
38var $this = this;
39
40this.options = $.extend({}, Message.defaults, options);
41
42this.uuid = "ID" + (new Date().getTime()) + "RAND" + (il(Math.random() * 100000));
43this.element = $([
44// alert-dismissable enables bs close icon
45            '<div class="uk-notify-message alert-dismissable">',
46            '<a class="close">×</a>',
47            '<div>' + ssage + '</div>',
48            '</div>'
49
50        ].join('')).data("notifyMessage", this);
51
52// status
53if (this.options.status) {
54this.element.addClass('alert alert-' + this.options.status);
55this.currentstatus = this.options.status;
56        }
57
59
60        messages[this.uuid] = this;
61
62if (!containers[this.options.pos]) {
63            containers[this.options.pos] = $('<div class="uk-notify uk-notify-' + this.options.pos + '"></div>').appendTo('body').on("click", ".uk-notify-message", function () {
64                $(this).data("notifyMessage").close();
65            });
66        }
67    };
68
69
70    $.extend(Message.prototype, {
71
72        uuid: false,
73        element: false,
74        timout: false,
75        currentstatus: "",
76        group: false,
77
78        show: function () {
79
80if (this.element.is(":visible")) return;
81
82var $this = this;
83
84            containers[this.options.pos].show().prepend(this.element);
85
86var marginbottom = parseInt(this.element.css("margin-bottom"), 10);
87
88this.element.css({
89                "opacity": 0,
90                "margin-top": -1 * this.element.outerHeight(),
91                "margin-bottom": 0
92            }).animate({"opacity": 1, "margin-top": 0, "margin-bottom": marginbottom}, function () {
93
94if ($this.options.timeout) {
95
96var closefn = function () {
97                        $this.close();
98                    };
99
100                    $this.timeout = setTimeout(closefn, $this.options.timeout);
101
102                    $this.element.hover(
103function () {
104                            clearTimeout($this.timeout);
105                        },
106function () {
107                            $this.timeout = setTimeout(closefn, $this.options.timeout);
108                        }
109                    );
110                }
111
112            });
113
114return this;
115        },
116
117        close: function (instantly) {
118
119var $this = this,
120                finalize = function () {
121                    $ve();
122
123if (!containers[$this.options.pos].children().length) {
124                        containers[$this.options.pos].hide();
125                    }
126
127delete messages[$this.uuid];
128                };
129
130if (this.timeout) clearTimeout(this.timeout);
131
132if (instantly) {
133                finalize();
134            } else {
135this.element.animate({
136                    "opacity": 0,
137                    "margin-top": -1 * this.element.outerHeight(),
138                    "margin-bottom": 0
139                }, function () {
140                    finalize();
141                });
142            }
143        },
144
145        content: function (html) {
146
147var container = this.element.find(">div");
148
149if (!html) {
150return container.html();
151            }
152
153            container.html(html);
154
155return this;
156        },
157
158        status: function (status) {
159
160if (!status) {
161return this.currentstatus;
162            }
163
veClass('alert alert-' + this.currentstatus).addClass('alert alert-' + status); 165
166this.currentstatus = status;
167
168return this;
169        }
170    });
171
172    Message.defaults = {
173        message: "",
174        status: "normal",
175        timeout: 5000,
176        group: null,
177        pos: 'top-center'
178    };
179
180
181    $["notify"] = notify;
182    $["notify"].message = Message;
183    $["notify"].closeAll = closeAll;
184
185return notify;
186
187 }(jQuery, window, document));
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。