javascript的for (var i in data)慎用

最新推荐文章于 2021-12-02 14:04:33 发布

xcg纸飞机xcg

最新推荐文章于 2021-12-02 14:04:33 发布

阅读量3.2k

点赞数 28

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45637920/article/details/108557026

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript中的for (var i in data)谨慎用

今天在学习javascript的时候发现了**for (var i in data)**是个坑，如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload= function(){
            //获取四个
            var items = document.getElementsByName("items");

            //减少代码重复
            function myClass(strId,fun) {
                var checkedAll = document.getElementById(strId);
                checkedAll.onclick = fun;
            }

            //全选
            myClass("checkedAllBtn",function(){
                for(var i=0;i<items.length;i++){
                    items[i].checked = true;
                }
            })

            //全不选
            myClass("checkedNoBtn",function() {
                for(var i=0;i<items.length;i++){
                    items[i].checked = false;
                }
            })

            //反选 
            myClass("checkedRevBtn",function() {
                for (var i = 0; i < items.length; i++) {
                    items[i].checked = !items[i].checked;
                }
            })

            //提交
            myClass("sendBtn",function() {
                //遍历
                //for(var i in items){         //不能用，循环的是属性
                //    if (i.checked) {
                //        alert(i.value);
                //   }
                //    console.log(i);
                //}
                //遍历
                for(var i = 0; i < items.length;i++){
                    if (items[i].checked) {
                        alert(items[i].value);
                    }
                }
            })

            //复选框的"全选/全不选"
            myClass("checkedAllBox",function() {
                for(var i = 0;i<items.length;i++){
                    items[i].checked = this.checked;
                }
            })
        }
    </script>
</head>
<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>
</html>

其中

注释的部分是得不到想要的结果
注释的部分是不能得到想要的结果，在网上找了有关介绍才知道。
在这里插入图片描述
这是原文链接

xcg纸飞机xcg

关注

28
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
javascript的for (var i in data)慎用

javascript中的for (var i in data)谨慎用今天在学习javascript的时候发现了**for (var i in data)**是个坑，如下代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫