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中的标签语句
Jun 19 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
js+canvas实现纸牌游戏
Mar 16 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
在javascript中实现函数数组的方法
2013/12/25 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python各种语言间时间的转化实现代码
2016/03/23 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
外贸公司实习自我鉴定
2013/09/24 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
爱我中华教学反思
2014/04/28 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
明星员工获奖感言
2014/08/14 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS