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

最新推荐文章于 2023-02-14 12:03:50 发布

原创最新推荐文章于 2023-02-14 12:03:50 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #全选 #反选 #不选

前端学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的前端JavaScript脚本，用于实现网页上复选框的全选、不选及反选功能。通过按钮点击触发相应事件，操作一组复选框的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

  <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>