滕州网站建设招聘,无锡网站优化哪家好,媒体网站,影视logo免费设计一、需求
1、单击全选按钮#xff0c;下面三个复选框自动选中#xff0c;再次单击全选按钮#xff0c;下面三个复选框自动取消选中
2、当下面三个复选框全都选中时#xff0c;全选按钮自动选中#xff0c;下面三个复选框至少有一个未选中#xff0c;全选按钮自动取消选…一、需求
1、单击全选按钮下面三个复选框自动选中再次单击全选按钮下面三个复选框自动取消选中
2、当下面三个复选框全都选中时全选按钮自动选中下面三个复选框至少有一个未选中全选按钮自动取消选中 二、代码素材
以下是缺失JS部分的代码感兴趣的小伙伴可以先自己试着写一写
!DOCTYPE htmlhtmlhead langenmeta charsetUTF-8title/titlestyle* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}/style
/headbodytabletrth classallCheckinput typecheckbox name idcheckAll span classall全选/span/thth商品/thth商家/thth价格/th/trtrtdinput typecheckbox namecheck classck/tdtd小米手机/tdtd小米/tdtd1999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米净水器/tdtd小米/tdtd4999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米电视/tdtd小米/tdtd5999/td/tr/tablescript/script
/body/html 三、算法思路
1、获取相关元素
2、为全选框绑定鼠标点击事件当点击事件触发时将下面三个复选框的状态设置为与全选框一致
3、利用事件委托为下面三个复选框绑定鼠标点击事件当任意一个复选框触发点击事件时判断下面三个复选框是否全为选中状态若全选中则将全选框设置为全选否则不设置。 四、完整代码
!DOCTYPE htmlhtmlhead langenmeta charsetUTF-8title/titlestyle* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}/style
/headbodytabletrth classallCheckinput typecheckbox name idcheckAll span classall全选/span/thth商品/thth商家/thth价格/th/trtrtdinput typecheckbox namecheck classck/tdtd小米手机/tdtd小米/tdtd1999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米净水器/tdtd小米/tdtd4999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米电视/tdtd小米/tdtd5999/td/tr/tablescript//获取元素const checkAll document.querySelector(#checkAll)const cks document.querySelectorAll(.ck)//业务模块一单击全选按钮下面三个复选框自动选中再次单击全选按钮下面三个复选框自动取消选中checkAll.addEventListener(click, function () {for (let i 0; i cks.length; i)cks[i].checked this.checked})//业务模块二当下面三个复选框全都选中时全选按钮自动选中下面三个复选框至少有一个未选中全选按钮自动取消选中//利用事件委托绑定事件const tabledocument.querySelector(table)table.addEventListener(click,e{if(e.target.tagNameINPUT){checkAll.checked document.querySelectorAll(.ck:checked).length cks.length//.ck:checked是CSS伪类选择器可以获取复选框中checked为true的选择器}})/script
/body/html
