Jquery实现checkbox按shift多选
html
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html;charset=utf-8">
4 <script src="jquery.min.js"></script>
5 <script src="shiftCheck.js"></script>
6 </head>
7 <body>
8 <table id="table">
9 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
10 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
11 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
12 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
13 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
14 <tr><td><input type="checkbox" ></td><td>hehe</td></tr>
15 </table>
16 </body>
17 </html>
js
1 function enableShiftCheck(checkboxs) {
2 let startChecked;
3 function handleCheck(e) {
4 if(e.shiftKey){
5 let thisIndex = checkboxs.index(this);
6 let startIndex = checkboxs.index(startChecked);
7 let startNum = thisIndex < startIndex ? thisIndex : startIndex;
8 let endNum = thisIndex > startIndex ? thisIndex : startIndex;
9 for(let i = startNum; i <= endNum; i++) {
10 if(this.checked) {
11 checkboxs.eq(i).prop("checked", true);
12 } else {
13 checkboxs.eq(i).prop("checked", false);
14 }
15 }
16 }
17 startChecked = this;
18 }
19 checkboxs.click(handleCheck);
20 }
21
22 $(function(){
23 enableShiftCheck($("#table :checkbox"));
24 });
![赞助](javascript:window.open("https://images.cnblogs.com/cnblogs_com/guanghe/2027516/t_210908054306alipay.png"))
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~