JS全选，全不选，添加，删除功能的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">添加</button>
    <ul id="list"></ul>

    <script>
        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');
        var btn3 = document.querySelector('#btn3');
        var btn4 = document.querySelector('#btn4');
        var list = document.querySelector('#list');

        btn1.onclick = function () {
            var chks = document.querySelectorAll('input');
            for (var i = 0; i < chks.length; i++) {
                chks[i].checked = true;
            }
        }

        btn2.onclick = function () {
            var chks = document.querySelectorAll('input');
            for (var i = 0; i < chks.length; i++) {
                chks[i].checked = false;
            }
        }

        //添加
        btn3.onclick = function () {
            // 创建一个li
            var item = document.createElement('li');
            // 创建一个复选框
            var chk = document.createElement('input');
            chk.type = 'checkbox';
            item.appendChild(chk); //复选框追加到li里
            // 创建一个删除按钮
            var btn = document.createElement('button');
            btn.onclick = function () {
                this.parentNode.remove(); //删除父元素即li
            }
            btn.innerHTML = '删除';
            item.appendChild(btn);
            list.appendChild(item);
        }
        //The achievement is attributed to miss peng

    </script>
</body>


</html>

JS全选，全不选，添加，删除功能的实现

推荐阅读