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>
其中
注释的部分是不能得到想要的结果，在网上找了有关介绍才知道。
这是原文链接