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>
其中
注釋的部分是不能得到想要的結果，在網上找了有關介紹才知道。
這是原文連結