一览画面点击复选框后获取多个id值的方法


Posted in Javascript onMay 30, 2016

在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除、修改、查看等操作。

修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上。

我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键。首先是在jsp页面中全选中复选框的方法。

代码如下:

function checkEvent(name, allCheckId) { 
var allCk = document.getElementById(allCheckId); 
if (allCk.checked == true) 
checkAll(name); 
else 
checkAllNo(name); 
} 
//全选 
function checkAll(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
if(!names[i].disabled){ 
names[i].checked = true; 
} 
} 
} 
//全不选 
function checkAllNo(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
names[i].checked = false; 
} 
}

调用该方法的jsp代码:

<input name="checkAll" id ="checkAll" onclick="checkEvent('chooseFaqId','checkAll')" type="checkbox"/></td>

其中,chooseFaqId是复选框的name属性值,checkAll是表头复选框的name属性值。

前台具体执行批处理的js代码,需要对选中的记录id值用逗号分隔,删除批处理方法代码如下:

function batchDeletechFaq(idStr){ 
var ids="'"; 
$("input[name='chooseFaqId']").each(function(){ 
if(this.checked){ 
ids+=this.value+"','" 
} 
}); 
ids+="'"; 
ids=ids.replace(/,''/g,''); 
if(ids=="''"){ 
jqDialog.alert("<s:text name='faqManage.pleaseSelectFaq'/>"); 
return; 
} 
$.ajax({ 
type:"POST", 
url:"admin/faqManageAction!batchDeleteFaq.action", 
data: {chooseFaqId: ids}, 
dataType: "text", 
success:function(html){ 
if(html=="success"){ 
jqDialog.alert("<s:text name='faqManage.OperationWasSuccessful'/>",function(){ window.location.href = window.location.href.replace(/#/g,''); 
}); 
} else { 
jqDialog.alert("<s:text name='faqManage.OperationFailedPleaseTryLater'/>"); 
} 
} 
}); 
}); 
}

后台获取前台传回的一组id值

final String ids = this.getRequest().getParameter("chooseFaqId");

原先获取选中的一组id采用的是以下方式:

final String ids = this.getRequest().getParameterValues("chooseFaqId");

这样可以直接得到一个字符串数组,不需要进行任何编辑操作。后来由于何种原因改成现在的方式有点记不清了。

最后是后台BO层执行删除的代码:

/** 
* 根据ID批量删除FAQ问题 
* @param faqAnswer 
* @return 
*/ 
public void batchDeleteFaq(final String ids){ 
final String hql = "delete from FAQAnswer o where o.id in ("+ids+")"; 
faqManagerDao.execute(hql); 
}

总结,我采用的是ajax提交方式,点击批量删除按钮后,首先判断用户是否至少选中了记录,否则弹出提示消息。选中后点击删除按钮执行后台方法。如果执行操作失败弹出操作失败消息框。

以上所述是小编给大家介绍的一览画面点击复选框后获取多个id值的方法,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 #Javascript
限制复选框最多选择项的实现代码
May 30 #Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
You might like
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
Vue中实现权限控制的方法示例
2019/06/07 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python使用生成器实现可迭代对象
2018/03/20 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
python实现扫雷小游戏
2020/04/24 Python
学习礼仪心得体会
2014/09/01 职场文书
离婚协议书格式
2015/01/26 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
JavaScript的function函数详细介绍
2021/11/20 Javascript
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL