css部分

全选<input type='checkbox' id='all'><br>
选择1<input type='checkbox' class='item'><br>
选择2<input type='checkbox' class='item'><br>
选择3C++<input type='checkbox' class='item'><br>

js部分

<script>
        var all = document.querySelector('#all');
        var options =Array.from( document.querySelectorAll('.item'));
        all.onchange = function(){
            options.forEach(item=>{
                item.checked = all.checked;
            })
        }
   //监听当所有的选上后
   options.forEach(item=>{
                item.onchange = function(){
                    all.checked = options.every(x=>x.checked)
                }
            })
        </script>