代码语言：javascript复制
<!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>
