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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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
日本十大惊悚动漫
2020/03/04 日漫
测试php函数的方法
2013/11/13 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
修改发贴的编辑功能
2007/03/07 Javascript
分页栏的web标准实现
2011/11/01 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
浅谈django orm 优化
2018/08/18 Python
python实现飞机大战
2018/09/11 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python中的全局变量如何理解
2020/06/04 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python中常用的os操作汇总
2020/11/05 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
高中生家长会演讲稿
2014/01/14 职场文书
学校运动会报道稿
2014/09/23 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL