JavaScript实现复选框全选与批量删除功能详解

作者:白露时间:2026-10-22 02:27:21浏览:155

本文介绍如何使用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;
 }

以上内容为本文的核心知识点,希望对读者在学习或实际工作中有所帮助,同时也欢迎继续支持本站内容更新。

作者最新文章