一览画面点击复选框后获取多个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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
jquery图形密码实现方法
Mar 11 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
Phpbean路由转发的php代码
2008/01/10 PHP
php whois查询API制作方法
2011/06/23 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python实现图片插入文字
2019/11/26 Python
keras实现多种分类网络的方式
2020/06/11 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
求职信的七个关键技巧
2014/02/05 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
廉洁教育学习材料
2014/05/19 职场文书
应聘教师求职信
2014/07/19 职场文书
绿色校园广播稿
2014/10/13 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记