复选框全选功能

先创建

    <p><input type="checkbox" id='ckAll'>全选</p>

    <p><input type="checkbox" class="ck">北京</p>

    <p><input type="checkbox" class="ck">上海</p>

    <p><input type="checkbox" class="ck">广州</p>

    <p><input type="checkbox" class="ck">深圳</p>

如图

    //获取全部复选框

        let ckAll = document.querySelector('#ckAll')

        let cks = document.querySelectorAll('.ck')

1.给全选复选框注册点击事件

        document.querySelector('#ckAll').onclick = function () {

            cks.forEach(r => { r.checked = this.checked })

        }

如果全选复选框选中，则其余复选框选中，反之不选中

2.给复选框注册点击事件

如图

l利用数组展开运算符使用数组方法，当有一个没选中，则全选复选框不选中，如果全选中，则全选复选框选中