带有全选功能的多选框

技术：冒泡、change事件、checked属性

冒泡

change事件: checkbox 自带的事件

在选项改变时触发

checked属性: checkbox自带的属性

选中时值为true 反之为false

<div id='app'>
        <label for="num1"><input type="checkbox" name="num" id="num1" value="1">1</label>
        <label for="num2"><input type="checkbox" name="num" id="num2" value="2">2</label>
        <label for="num3"><input type="checkbox" name="num" id="num3" value="3">3</label>
        <label for="num4"><input type="checkbox" name="num" id="num4" value="4">4</label>    
        <label for="numall"><input type="checkbox" id="numall">全选</label>    
    </div>
    <script>
        function showResult(){
            checkbox.forEach((x,index)=>{
                console.log(index+':'+x.checked+'\n')
            })
        }
        function selectAll(){
            let result = checkbox[0].checked
            if(result){
                checkbox.forEach((x)=>{
                    x.checked = false
                })
            }else{
                checkbox.forEach((x)=>{
                    x.checked = true
                })
            }
        }
        var app = document.getElementById('app')
        var checkbox = document.getElementsByName('num')
        var numall = document.getElementById('numall')
        app.addEventListener('change',showResult)
        numall.addEventListener('change',selectAll)
    </script>