一览画面点击复选框后获取多个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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
mysql limit查询优化分析
2008/11/12 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python list转矩阵的实例讲解
2018/08/04 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
一道Delphi面试题
2016/10/28 面试题
应届生新闻编辑求职信
2013/11/19 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书