js实现全选、全不选、反选

最新推荐文章于 2023-10-23 14:09:15 发布

weixin_30814223

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whs5280/p/9750739.html

本文介绍了一个使用JavaScript实现全选、全不选和反选复选框功能的简单示例。通过操作DOM元素，该代码能够响应按钮点击事件，对页面上的所有复选框进行状态修改。

一个js的简单实验

思路：通过 document.getElementsByTagName('input')获取集合，判断类型是否为checkbox，再对其进行操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <input type="checkbox" name="fruit" value="苹果">苹果
        <input type="checkbox" name="fruit" value="香蕉">香蕉
        <input type="checkbox" name="fruit" value="芒果">芒果
        <input type="checkbox" name="fruit" value="葡萄">葡萄
    </form>
    <button id="all">全选</button>
    <button id="not">全不选</button>
    <button id="reve">反选</button>

    <script>
        var all = document.getElementById('all');
        var not = document.getElementById('not');
        var reve = document.getElementById('reve');
        var fruit = document.getElementsByTagName('input');
        //全选
        all.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == 'checkbox'){
                    fruit[i].checked = true;
                }
            }
        };
        //全不选
        not.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == 'checkbox'){
                    fruit[i].checked = false;
                }
            }
        };
        //反选
        reve.onclick = function(){
            for(var i=0;i<=fruit.length;i++){
                if(fruit[i].type == 'checkbox'){
                    /*if(fruit[i].checked == true){
                        fruit[i].checked = false;
                    }else{
                        fruit[i].checked = true;
                    }*/
                    fruit[i].checked = !fruit[i].checked;
                }
            }
        };
    </script>
</body>
</html>