首页 > Web开发 > 详细

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

时间:2018-10-07 18:21:26      阅读:180      评论:0      收藏:0      [点我收藏+]

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

 技术分享图片

 

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

原文:https://www.cnblogs.com/whs5280/p/9750739.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!