今日第二分作业,写这个的时候思路很清晰,但是太马虎大意了,checked的选中以及不选中的值为true和false,但是前两天一直在用字符串类型的值在做练习,手一滑写习惯了,在checked一行写成了checked = "true"和chenecked = "false",于是发现不管点哪一个,都会出现全选的现象,自己看了半天,突然意识到只有是默认值为true时才会点击取消button出现选中的情况,于是仔细去检查发现果然把值写成了字符串属性,于是乎在checked = false时就当false成为"false"成为了字符串,引擎自动默认为为checked = true,就出现了所有的控件都是全选功能。哎还是粗心!!!!说完废话看代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table id="content" align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
<tr>
<th> </th>
<th>ID</th>
<th>姓名</th>
<th>绰号</th>
</tr>
<tr>
<td><input type="checkbox" name="id[]" value="1"></td>
<td>1</td>
<td>宋江</td>
<td>及时雨</td>
</tr>
<tr>
<td><input type="checkbox" name="id[]" value="2"></td>
<td>2</td>
<td>卢俊义</td>
<td>玉麒麟</td>
</tr>
<tr>
<td><input type="checkbox" name="id[]" value="3"></td>
<td>3</td>
<td>吴用</td>
<td>智多星</td>
</tr>
<tr>
<td><input type="checkbox" name="id[]" value="4"></td>
<td>4</td>
<td>鲁智深</td>
<td>花和尚</td>
</tr>
<tr>
<td><input type="checkbox" name="id[]" value="5"></td>
<td>5</td>
<td>林冲</td>
<td>豹子头</td>
</tr>
</table>
<table align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>
<input type="button" value="全选" id="quanxuan">
<input type="button" value="返选" id="fanxuan">
<input type="button" value="取消" id="quxiao">
</td>
</tr>
</table>
<script>
window.onload= function () {
var Btn = document.querySelectorAll("[name='id[]']");
//console.log(typeof Btn);
var SelectYes = document.getElementById("quanxuan");
//console.log(typeof SelectYes)
var SelectFan = document.getElementById("fanxuan");
//console.log(typeof SelectFan)
var SelectNo = document.getElementById("quxiao");
//console.log(typeof SelectNo)
SelectYes.onclick = function(){
for(var i = 0;i<Btn.length;i++){
Btn[i].checked = true;
}
}
SelectNo.onclick = function(){
for(var k = 0;k<Btn.length;k++){
Btn[k].checked = false; //说一万遍这个是值!不是字符串
}
}
SelectFan.onclick = function(){
for(var j = 0;j<Btn.length;j++){
if(Btn[j].checked == true){
Btn[j].checked = false;
}else if(Btn[j].checked == false){
Btn[j].checked=true;
}
}
}
}
</script>
</body>
</html>