爱好选择

思路：
1、在js中查找需要用到的元素
2、监听全选、反选、查看按钮
2、遍历input、结合checked是否为true来做

    <style>
        ul {
            width: 350px;
            padding-bottom: 15px;
            border-bottom: 2px gray solid;
        }

        ul li {

            width: 60px;
            margin-top: 10px;
            margin-left: 50px;
        }

        .aa {
            margin-top: 10px;
            margin-left: 75px;
        }

        p {
            width: 40px;
            margin-left: 25px;
            padding-top: 15px;
        }
    </style>

    <ul>
        <h1>请选择你的爱好：</h1>
        <li><input type="checkbox" name="" id="" value="音乐">音乐</li>
        <li> <input type="checkbox" name="" id="" value="登山">登山</li>
        <li> <input type="checkbox" name="" id="" value="游泳">游泳</li>
        <li> <input type="checkbox" name="" id="" value="阅读">阅读</li>
        <li> <input type="checkbox" name="" id="" value="打球">打球</li>
        <li> <input type="checkbox" name="" id="" value="跑步">跑步</li>
        <li><input type="checkbox" name="" id="" value="其他">其他</li>
    </ul>
    <li class="aa"><button>查看我的爱好</button></li>
    <button class="cc">全选</button>
    <button class="dd">反选</button>
    <p></p>
    <script>
        var mych = document.querySelectorAll("input");
        var btn = document.querySelector("button");
        var btn1 = document.querySelector(".cc");
        var btn2 = document.querySelector(".dd");
        var myp = document.querySelector("p");

        // 全选
        btn1.onclick = function () {
            for (let i = 0; i < mych.length; i++) {
                mych[i].checked = true
            }
        }
        // 反选
        btn2.onclick = function () {
            for (let i = 0; i < mych.length; i++) {
                mych[i].checked = !mych[i].checked
            }
        }
        // 查看
        btn.onclick = function () {
            var str = ''
            for (let i = 0; i < mych.length; i++) {
                if (mych[i].checked) {
str += mych[i].value
                }
                myp.innerHTML = str
            }
        }
    </script>
</body>