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 事件的一些重要说明
Oct 25 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
JsDom 编程小结
Aug 09 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP目录操作实例总结
2016/09/27 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python字典操作实例详解
2017/11/16 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python生成特定分布数的实例
2019/12/05 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
增大python字体的方法步骤
2020/07/05 Python
Python实现一个论文下载器的过程
2021/01/18 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
销售类个人求职信范文
2013/09/25 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
公司保洁员管理制度
2015/08/04 职场文书