一览画面点击复选框后获取多个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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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服务器实现多session并发运行
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python selenium 获取接口数据的实现
2020/12/07 Python
表达自我的市场:Society6
2018/08/01 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
企划经理的岗位职责
2013/11/17 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
医院工作检讨书范文
2014/02/10 职场文书
美术教师岗位职责
2014/03/18 职场文书
文明班集体申报材料
2014/05/23 职场文书
体育教师求职信
2014/05/24 职场文书
端午节寄语2015
2015/03/23 职场文书
地心历险记观后感
2015/06/15 职场文书