一览画面点击复选框后获取多个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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS解析XML实例分析
2015/01/30 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
浅析Python面向对象编程
2020/07/10 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
给客户的道歉信
2014/01/13 职场文书
学生宿舍管理制度
2014/01/30 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
小学假期安全广播稿
2014/09/28 职场文书
财务个人年度总结范文
2015/02/26 职场文书
公司员工辞职信范文
2015/05/12 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript