欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-04-21 18:35:15
...

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，还有许多东西还不熟练，觉得按钮与对象的绑定可以通过函数实现统一达到优化

相关标签： 初学

上一篇： python语言基础+课后练习day02

下一篇： 计蒜客 【移除数组中的重复元素】

推荐阅读