关于jsp页面table 实现checkbox复选
来源:互联网 发布:淘宝图片轮播什么意识 编辑:程序博客网 时间:2024/06/02 06:47
在table里实现复选,在<thead> <tr>标签下加入<th style="width: 7%;height: 20px;"><input type="checkbox" /></th>如图所示
这里插入的复选框在页面效果如图:
然后在<tbody><tr>里加入<td><input type="checkbox" value="${item.id}"/></td>这里的value值是列表里边的id,这里必须要将id绑定进去,如图
这句话在页面中的效果如图:
然后用js实现复选框的全选效果
var $thr = $('table thead tr'); //这是获取表头的复选框
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();
});
有了这段js 复选框的效果就有了
接下来进行id值的绑定,将我们选定的项所取的id拿出来只需要在页面调用下面这段代码我们就可以得到选定的项的id(这里使用的一个数组接收的所选id)
function ck(){
var nodes = $("#tableId tr td input:checked"); //获取所有复选框选中的项作为一个对象
var ids = new Array(); //创建一个接收id的数组
$.each(nodes,function(i){ //遍历所选的对象
ids.push($(nodes[i]).val()); //将每一个选中对象的值赋给接收id的数组
});
//下面这句只是测试获取数组成功没有没其他用
if (ids.length !=0) {
alert(ids);
}
}
效果如图
到这里我们已经实现了复选并成功获取到了选中项的id
(此文只为了让自己记得复选技术的做法,所以多用了截图,仅供其他小伙伴参考)
- 关于jsp页面table 实现checkbox复选
- 关于jsp页面的复选框(checkbox)取值的获取问题
- 关于JSP复选框页面传值
- 关于复选框checkbox
- CheckBox实现复选
- 获取jsp checkbox 复选框
- iOS 实现复选框 checkbox
- iOS 实现复选框 checkbox
- jsp 复选框说明radio 与 checkbox
- jsp复选框checkbox----表单处理
- 关于css中树形的开闭以及复选框checkbox如何全选取消的实现
- BootStrap-table 复选框默认选中(checkbox)
- BootStrap-table 复选框默认选中(checkbox)
- jsp页面中的checkbox效验
- buttion和checkbox实现全选、复选
- jquery复选框checkbox实现删除
- 复选框checkbox实现批量删除
- jquery复选框checkbox实现删除
- android文件保存与读取的几种方法
- Material Design概述(一)
- 内部类
- 64位 windows10下 Apache2.4 + php7 + phpstorm 相关设置
- Trait
- 关于jsp页面table 实现checkbox复选
- leetcode-5. Longest Palindromic Substring
- Java源码视频
- JAVA注释应用小例子
- android 开发笔记 图片轮播
- PCL可视化例程
- InnoDB最佳实现
- 树莓派学习笔记——webiopi装配与入门
- Codeforces Round #379 (Div. 2) Anton and Chess