练习js遇到的问题
注意红色与绿色的提示问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getElementById('main');
var oul = document.getElementById('ul1');
var abtn = oul.getElementsByTagName('input');
for(var j=0;j<abtn.length;j++){
abtn[j].onclick = function(){
//alert(this.checked);//checked是自带属性如果未没明确标明的话那么默认为false
//this.checked = !this.checked;
//alert(this.checked);
/*if(this.checked){//checked是自带属性如果未没明确标明的话那么默认为false，此处判断弄巧成拙，因为checked会随着点击选中或选不中的状态而改变
this.checked = !this.checked;
}*/
if(this.checked==false){
obtn.checked = false;
}
}
}
obtn.onclick = function(){
//alert(obtn.checked); //checked是其自带属性,未申明时默认为false，首次点击选中后变为true，再次点击时变为相反状态
//alert(this.checked);
if(this.checked==true){
for(var i=0;i<abtn.length;i++){
abtn[i].checked = true;
}
//flag = !flag;
}else{
for(var j=0;j<abtn.length;j++){
abtn[j].checked = false;
//flag = !flag;
}
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
<li><input type="checkbox" /></li>
</ul>
<ul><li>全选<input type="checkbox" id="main"/></li></ul>
</body>
</html>
