【Web】input标签一键全选处理

一、演示

二、代码

html代码：

<input type="checkbox">全选
    <input type="checkbox">游泳
    <input type="checkbox">长跑
    <input type="checkbox">跳高
    <input type="checkbox">跳远

js代码：

var ins = document.getElementsByTagName('input')
        //全选按钮点击事件
        ins[0].onclick = function(){
            
            for(var i=1;i<ins.length;i++)
            {
                ins[i].checked = ins[0].checked
            }
        }

        //判断是否全选了
        function isSelectAll(){
            var isAll = true
            //判断所有的input，如果有一个是false，那么就是非全选
            for(var i=1;i<ins.length;i++)
            {
                if(ins[i].checked == false)
                {
                    return false
                }
            }
            return isAll
        }

        //给每一个input添加点击事件
        for(var i=1;i<ins.length;i++)
        {
            ins[i].onclick = function(){
                //每一次点击完之后，都判断全选按钮是否被选中了
                ins[0].checked = isSelectAll()
            }
        }