JavaScript实现复选框全选与批量删除功能详解
本文介绍如何使用JavaScript实现商品列表的复选框全选与批量删除功能。通过监听全选复选框的onclick事件,同步所有子项的选中状态。利用复选框的value属性存储商品ID,在批量删除时遍历选中项拼接ID参数,并通过location.href发送GET请求至Servlet完成数据删除操作。
界面效果如图所示:

复选框全选功能实现
功能说明:当用户勾选全选复选框时,列表内所有商品对应的复选框均变为选中状态;取消全选时,所有商品复选框随之取消选中。若执行批量删除操作,系统将移除当前所有被勾选的商品数据。
<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复选框的当前checked状态,随后将该状态赋值给列表中其他所有商品的复选框。此步骤逻辑较为简单。难点在于如何实现商品的批量删除功能。
批量删除逻辑与数据传递
起初思考复选框作为UI组件,如何与商品主键(ID)建立关联。后来发现复选框组件具备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;
}
以上内容为本文的核心知识点,希望对读者在学习或实际工作中有所帮助,同时也欢迎继续支持本站内容更新。
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
