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

 更新时间:2017年04月05日 14:30:22   作者:甄情  
本文主要介绍了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;
 }

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

相关文章

  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • JavaScript拖拽、碰撞、重力及弹性运动实例分析

    JavaScript拖拽、碰撞、重力及弹性运动实例分析

    这篇文章主要介绍了JavaScript拖拽、碰撞、重力及弹性运动实现方法,涉及JavaScript数学运算结合时间函数实现运动效果的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 原生JS实现获取及修改CSS样式的方法

    原生JS实现获取及修改CSS样式的方法

    这篇文章主要介绍了原生JS实现获取及修改CSS样式的方法,结合实例形式简单分析了JavaScript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-09-09
  • JS实现给json数组动态赋值的方法示例

    JS实现给json数组动态赋值的方法示例

    这篇文章主要介绍了JS实现给json数组动态赋值的方法,结合实例形式分析了javascript针对json数组的遍历、赋值等常用操作技巧,需要的朋友可以参考下
    2017-07-07
  • 老生常谈ES6中的类

    老生常谈ES6中的类

    下面小编就为大家带来一篇老生常谈ES6中的类。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript插件Tab选项卡效果

    JavaScript插件Tab选项卡效果

    这篇文章主要为大家详细介绍了JavaScript插件Tab选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 构造函数+原型模式构造js自定义对象(最通用)

    构造函数+原型模式构造js自定义对象(最通用)

    这种方式是javascript中最通用的创建对象的方式,下面用示例为大家介绍下
    2014-05-05
  • JavaScript前端实现压缩图片功能

    JavaScript前端实现压缩图片功能

    这篇文章主要介绍了JavaScript前端实现压缩图片功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • javascript图像处理—仿射变换深度理解

    javascript图像处理—仿射变换深度理解

    上一篇文章,我们讲解了图像金字塔,这篇文章我们来了解仿射变换,仿射?任何仿射变换都可以转换成,乘以一个矩阵(线性变化),再加上一个向量(平移变化),接下来详细介绍,感兴趣的朋友可以了解下
    2013-01-01
  • 用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用XMLDOM和ADODB.Stream实现base64编码解码实现代码

    用 XMLDOM 和 ADODB.Stream 实现base64编码解码实现代码,需要的朋友可以参考下。
    2010-11-11

最新评论