JS实现复选框的全选和批量删除功能


Posted in Javascript onApril 05, 2017

如图示:

JS实现复选框的全选和批量删除功能

功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选。如果点击批量删除,删除所勾选的商品。

<td align="center" width="12%" >
 <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全选/全不选
</td>
//全选
 function ckAll(){
 var flag=document.getElementById("allChecks").checked;
 var cks=document.getElementsByName("check");
 for(var i=0;i<cks.length;i++){
 cks[i].checked=flag;
 }
 }

如代码所示,全选/全不选的复选框添加onclick事件。每当点击了这个复选框时,触发ckAll事件。在ckAll()方法中,我们首先获得allChecks当前的勾选状态,然后将其赋值为其它商品的复选框即可。这一步实现很简单。复杂的是如何实现商品的批量删除。

起初我一直在想,复选框只是一个组件,到底怎么才能和商品的编号(主键)有关系。无意中发现复选框组件中有一个value的值,我可以把商品的编号赋值给value,然后在批量删除时获得value的值,通过get请求传送给servlet。成功解决了这个问题。

代码如下:

<td style="CURSOR: hand; HEIGHT: 22px" align="center"
 width="23">
 <input type="checkbox" name="check" value="${book.id}"/> 
</td>
//批量删除
 function delAllProduct(){
 if(!confirm("确定要删除这些图书吗?")){
 return ;
 }
 var cks=document.getElementsByName("check");
 var str="";
 //拼接所有的图书id
 for(var i=0;i<cks.length;i++){
 if(cks[i].checked){
 str+="id="+cks[i].value+"&";
 }
 }
 //去掉字符串末尾的‘&'
 str=str.substring(0, str.length-1);
 location.href="${pageContext.request.contextPath}/servlet/delAllBooksServlet?" rel="external nofollow" +str;
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
vue2.0 和 animate.css的结合使用
Dec 12 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 #Javascript
JS二叉树的简单实现方法示例
Apr 05 #Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 #Javascript
js获取指定时间的前几秒
Apr 05 #Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 #Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 #Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 #Javascript
You might like
php使用google地图应用实例
2014/12/31 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
树结构之JavaScript
2017/01/24 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
详解Django admin高级用法
2019/11/06 Python
python实现简单图书管理系统
2019/11/22 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
如何把python项目部署到linux服务器
2020/08/26 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
如何选择使用结构还是类
2014/05/30 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
报社实习生自荐信
2014/01/24 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
委托书样本
2014/04/02 职场文书
毕业生找工作求职信
2014/08/05 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
招标授权委托书样本
2014/09/23 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js