js实现全选

实现要求:

  1. 选中"全选"框,以下所有选项全部勾选。
  2. 把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。
  3. 当其他复选框全部选中,"全选框"为选中状态。
  4. 当其他复选框有一个未选中,"全选框"取消选中状态。
    注意:
  5. 必须使用DOM0级标准事件(onchange)
    js实现全选_第1张图片
    js实现全选_第2张图片
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
        <style>
            ul {
                list-style: none;
            }
        </style>
    <body>
        <ul>
            <li>全选<input type='checkbox' id='all'></li>
            <li>Java<input type='checkbox' class='item'></li>
            <li>javaScript<input type='checkbox' class='item'></li>
            <li>C++<input type='checkbox' class='item'></li>
            <li>python<input type='checkbox' class='item'></li>
            <li>.net<input type='checkbox' class='item'></li>
        </ul>

        <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>
    </body>
</html>

你可能感兴趣的:(javascript)