<!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>