初学Javascript--DOM全选反选练习

最新推荐文章于 2023-03-26 23:22:24 发布

EurekaSeveN7

最新推荐文章于 2023-03-26 23:22:24 发布

阅读量311

点赞数

文章标签：初学

本文链接：https://blog.csdn.net/EurekaSeveN7/article/details/81592507

版权

HTML内容

<body>
        <form method="post" action="">你爱好的运动是？
            <input type="checkbox" id="checkedAllBox" />全选/全不选
            <br />
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
            <input type="checkbox" name="items" value="乒乓球" />乒乓球
            <br />
            <input type="button" id="checkedAllBtn" value="全 选" />
            <input type="button" id="checkedNoBtn" value="全不选" />
            <input type="button" id="checkedRevBtn" value="反 选" />
            <input type="button" id="sendBtn" value="提 交" />
        </form>
    </body>

实现全选功能

var items = document.getElementsByName('items');//创建一个items对象用于统计长度
var allbtn = document.getElementById('checkedAllBtn');
                allbtn.onclick = function (){

                    var  getCheckBox = document.getElementsByName("items");
                    for(var i = 0;i < items.length;i++)
                    {
                        getCheckBox[i].checked = true;
                    }

实现全不选功能

var nobtn = document.getElementById('checkedNoBtn');
                nobtn.onclick = function (){
                    var noCheckBox = document.getElementsByName("items");
                    for(var i = 0;i<items.length;i++)
                    {
                        noCheckBox[i].checked = false;
                    }

                }

实现利用多选框统一选择全选以及全不选功能

var checkAllBox = document.getElementById('checkedAllBox');
                var check = false//创建一个check对象用于检查多选框的状态
                checkAllBox.onclick = function(){
                    var  getCheckBox = document.getElementsByName("items");

                    if(check==false)//如果多选框处于未选择状态则为全选反之为全不选
                    {
                    for(var i =0;i<items.length;i++)
                    {
                        getCheckBox[i].checked = true;
                        check=true;
                    };
                    }
                    else{
                        for(var i =0;i<items.length;i++)
                    {
                        getCheckBox[i].checked = false;
                        check=false;
                    };

                    }
                };

反选功能

var  checkedRevBtn = document.getElementById('checkedRevBtn');
                checkedRevBtn.onclick = function(){
                    for(var i = 0;i<items.length;i++)
                    {
                        if(items[i].checked)
                        {
                            items[i].checked=false;
                        }
                        else{
                            items[i].checked=true;
                        }//也可以直接利用取反items[i].checked =! items[i].checked实现
                    }
                }

提交按钮实现

var subBtn = document.getElementById('sendBtn');
                subBtn.onclick = function(){
                    var arr = [];
                    for(var i=0;i<items.length;i++)
                    {
                        if(items[i].checked==true)
                        {
                        arr.push(items[i].value);
                        }
                    }
                    alert(arr);
                }

初学JS，还有许多东西还不熟练，觉得按钮与对象的绑定可以通过函数实现统一达到优化

EurekaSeveN7

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学Javascript--DOM全选反选练习

HTML内容&lt;body&gt; &lt;form method="post" action=""&gt;你爱好的运动是？ &lt;input type="checkbox" id="checkedAllBox" /&gt;全选/全不选 &lt;br /&gt; &amp
复制链接

扫一扫