JavaScript实现全选,反选,不选--小记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26841579/article/details/80846114

学习前端的时候记下小知识点。
如下】、
这里写图片描述

  <script>
        //静态页面加载完成后再加载。js
        window.onload=function () {
            var btn1=document.getElementById('btn1');
            var btn2=document.getElementById('btn2');
            var btn3=document.getElementById('btn3');
            var div1=document.getElementById('div1');
            var che=div1.getElementsByTagName('input');
            //全选
            btn1.onclick=function () {
                for(var i=0;i<che.length;i++){
                    che[i].checked=true;
                }
            }
            //不选
            btn2.onclick=function () {
                for(var i=0;i<che.length;i++){
                    che[i].checked=true;
                }
            }
            //反选
            btn3.onclick=function () {
                for(var i=0;i<che.length;i++){
                    if (che[i].checked==true){
                        che[i].checked=false;
                    }else{
                        che[i].checked=true;
                    }
                }
            }


        }
    </script>



<body>
<input type="button" id="btn1" value="全选"/>
<input type="button" id="btn2" value="不选"/>
<input type="button" id="btn3" value="反选"/>
<div id="div1">
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>
    <input type="checkbox" name="box"/>

</div>

猜你喜欢

转载自blog.csdn.net/qq_26841579/article/details/80846114
今日推荐