首页<input type="checkbox" id="selectAll">全选/全不选在该按钮上加上全选/全不选功能的前端jsp页面代码、’

<input type="checkbox" id="selectAll">全选/全不选在该按钮上加上全选/全不选功能的前端jsp页面代码、’

时间: 2023-07-06 10:35:39 浏览: 94

jQuery实现全选、反选和不选功能的方法详解

本文实例讲述了jQuery实现全选、反选和不选功能的方法。分享给大家供大家参考，具体如下：适用于网页多选后需要进行批量操作的场景（如批量删除等）。如有问题希望大家可以指正。谢谢~~ HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮 <ul id=list> <li><label><input type=checkbox value=1> 1.时间都去哪儿了</label></li> <li><label><input type=checkbox value=2> 2.海阔天空</label></li>

以下是使用 JSP 实现的前端页面代码： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选/全不选</title> </head> <body> <form> <input type="checkbox" id="selectAll">全选/全不选<br> <input type="checkbox" name="option1" value="1">选项1<br> <input type="checkbox" name="option2" value="2">选项2<br> <input type="checkbox" name="option3" value="3">选项3<br> <input type="checkbox" name="option4" value="4">选项4<br> </form> <script> const selectAll = document.getElementById("selectAll"); const checkboxes = document.querySelectorAll("input[type='checkbox']:not(#selectAll)"); selectAll.addEventListener("change", () => { checkboxes.forEach((checkbox) => { checkbox.checked = selectAll.checked; }); }); </script> </body> </html> ``` 这个 JSP 页面包含一个表单，其中包含多个复选框和一个全选/全不选复选框。当用户勾选或取消全选/全不选复选框时，其他所有复选框的状态都会被同步更新。在这个页面中，我们使用了 JavaScript 代码来监听全选/全不选复选框的`change`事件，并根据其状态来更新其他复选框的选中状态。其中，我们使用了`querySelectorAll`方法来选择除了全选/全不选复选框之外的所有复选框，并使用了`forEach`方法来遍历它们并更新它们的选中状态。

阅读全文