html checkbox 实现全选/取消全选效果
在前端开发的过程中,特别是数据表格的处理,我们经常碰到checkbox全选与取消以及动态的根据子类的选中状态确定全选checkbox是否“checked”
全选与取消全选
<html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr> <tr> <td><input type="checkbox" /></td> <td>January</td> <td>$100</td> </tr> <tr> <td><input type="checkbox" /></td> <td>February</td> <td>$150</td> </tr> </table> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> //checkbox 全选/取消全选 var isCheckAll = false; function swapCheck() { if (isCheckAll) { $("input[type='checkbox']").each(function() { this.checked = false; }); isCheckAll = false; } else { $("input[type='checkbox']").each(function() { this.checked = true; }); isCheckAll = true; } } </script> //优化版本 <script type="text/javascript"> var isCheckAll = false; function swapCheck() { $("input[type='checkbox']").each(function() { this.checked = !isCheckAll; }); isCheckAll = !isCheckAll; } </script> </body> </html>
还要满足两个常用场景:
当然我们实现这个功能还是不够的,考虑以下2个常用场景,
场景1:如果用户在全选完之后,把部分行数据“取消”了选中;
场景2:用户通过手动点击行内的checkbox最终实现了“全选”的状态
通过前端实现
js代码:
<script type="text/javascript"> function listenCheckbox(){ $("tr td input[type='checkbox']").on('change',function(){ //总量 var total=$("tr td input[type='checkbox']").length; ////实际被选中的 var exact=$("tr td input[type='checkbox']:checked").length; ////检测所有的check选项的有多少与总量进行对比 $("tr th input[type='checkbox']")[0].checked=(total==exact); //true or false }) } listenCheckbox() </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!