其他分享
首页 > 其他分享> > 全选、全不选、反选

全选、全不选、反选

作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <!-- 假如你在input中写了checked,就算checked=false也会在页面中显示被选中 -->
            <p><input type="checkbox"  name="" id="">赵四</p>
            <p><input type="checkbox"  name="" id="">刘能</p>
            <p><input type="checkbox"  name="" id="">宋小宝</p>
            <p><input type="checkbox"  name="" id="">谢广坤</p>
        </form>
        <button οnclick="getAll(0)">全选</button>
        <button οnclick="getAll(1)">全不选</button>
        <button οnclick="getAll(2)">反选</button>
        
        <script>
            var p = document.getElementsByTagName('input');
            var button = document.getElementsByTagName('button');
            var flag = true;
            // 第一种方法
            // button[0].onclick = function(){
            //     for (i=0;i<p.length;i++){
            //         p[i].checked = true;
            //     }
            // }
            // button[1].onclick = function(){
            //     for (i = 0; i < p.length; i++){
            //         p[i].checked = false;
            //     }
            // }
            
            // button[2].onclick = function(){
            //     for (i = 0; i < p.length; i++){
            //         p[i].checked = !p[i].checked;
            //     }
            // }
            // 第二种方法，封装成为一个函数
            function getAll(num){
                for(i = 0;i<p.length;i++){
                    if(num === 0){
                        p[i].checked = true;
                    }else if(num === 1){
                        p[i].checked = false;
                    }else{
                        p[i].checked = !p[i].checked
                    }
                }
            }
            
        
        </script>
    </body>
</html>

 

 

标签：function,checked,button,反选,num,全选,全不选,onclick,var
来源： https://blog.csdn.net/qq_47997447/article/details/120660792