<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding:0px;margin: 0px;} .music { width: 400px; box-shadow: 0 0 5px #000; margin: 100px auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .music>h3 { line-height: 40px; text-align: center; border-bottom: 1px solid #ccc; } .music>ul>li { list-style: none; line-height: 30px; border-bottom: 1px solid #ccc; } .music>div { line-height: 40px; text-align: center; } </style> </head> <body> <div class="music"> <h3>歌曲排行榜</h3> <ul> <li><input type="checkbox">醒着做梦</li> <li><input type="checkbox">男人不应该让女人流泪</li> <li><input type="checkbox">女人不应该让男人太累</li> <li><input type="checkbox">狂浪</li> <li><input type="checkbox">生僻字</li> <li><input type="checkbox">沙漠骆驼</li> <li><input type="checkbox">最美的期待</li> <li><input type="checkbox">光年之外</li> </ul> <div> <button id="all_select">全选</button> <button id="cancel_select">取消全选</button> <button id="reveser_select">反选</button> </div> </div> <script type="text/javascript"> //拿到需要的元素做事情 let oItems = document.querySelectorAll("input"); let allSelectBtn = document.querySelector("#all_select"); let cancelSelectBtn = document.querySelector("#cancel_select"); let reveserSelectBtn = document.querySelector("#reveser_select"); allSelectBtn.onclick=function() { oItems.forEach(function(item) { item.checked=true;//当全选点击后,遍历input,全部变成true点击把。 }); cancelSelectBtn.onclick=function(item) { oItems.forEach(function(item) { item.checked=false;//当取消全选后,把全部的input都变成false把。 }); } reveserSelectBtn.onclick=function(item) { oItems.forEach(function(item) { item.checked=!item.checked; //把true变成false,把false变成true把. }); } } </script> </body> </html>
dom啦 全选反选
关注
打赏
