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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
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封装CURL
2019/03/06 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python读文件逐行处理的示例代码分享
2013/12/27 Python
python实现排序算法
2014/02/14 Python
使用python 获取进程pid号的方法
2014/03/10 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
上海中网科技笔试题
2012/02/19 面试题
专科文秘应届生求职信
2013/11/18 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
投标服务承诺书
2014/05/28 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
办理房产证委托书
2014/09/18 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技