摘要：看起来很简单的一个小练习却做了半天，代码却并不多，看来还得多多练习，温故而知新。我好像没记得checkbox和label的用法？是不是前面没讲还是我漏看了？老师我发现几个问题麻烦解答一下，谢谢：1 --true和false可以分别用非0 和 0代替，也不能加引号，否则会被认为是字符串，类型就变成true了,是这么理解吗？2 &nbs
看起来很简单的一个小练习却做了半天，代码却并不多，看来还得多多练习，温故而知新。
我好像没记得checkbox和label的用法？是不是前面没讲还是我漏看了？
老师我发现几个问题麻烦解答一下，谢谢：
1 --true和false可以分别用非0 和 0代替，也不能加引号，否则会被认为是字符串，类型就变成true了,是这么理解吗？
2 -- if (ocheckall.checked)，这个括号内的内容不是判断是否点击了选择框的意思吗？为什么不能写成ocheckall.checked=true？？
3 --name可以当id或class来用吗？如果可以，name的css选择器是什么呢？
全选功能的js代码主要实现方法：
绑定元素、声明函数，for循环向数组内添加数据、if else语句控制checked值为true或false、用onclick方法调用函数。
涉及到的其它知识有：label中用for+"id名"绑定点击的范围；
实现结果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box {
color: grey;
margin: 20px auto;
text-align: center;
width: 200px;
height: 300px;
border: 3px solid rgb(102, 219, 7);
border-radius: 10px;
box-shadow: 0px 0px 25px rgb(110, 11, 230);
}
hr {
width: 80%;
border-color: rgb(9, 131, 153);
box-shadow: 0px 0px 5px rgb(30, 216, 197);
}
.checkarea {
font-size: 25px;
text-align: left;
width: 70%;
height: 80%;
margin: 0 auto;
padding-top: 10px;
padding-left: 20px;
border-radius: 20px;
background: rgb(236, 202, 10);
box-shadow: 0px 10px 15px rgb(141, 143, 139);
}
</style>
<script>
function ckall() {
ocheckall = document.getElementById("checkall");
oipt = document.getElementsByName("ipt");
obox = document.getElementById("box");
for (var i = 0; i < oipt.length; i++) {
if (ocheckall.checked) {
oipt[i].checked = true;
obox.style.color = "green";
} else {
oipt[i].checked = false;
obox.style.color = "grey";
}
}
}
</script>
</head>
<body>
<div id="box">
<input type="checkbox" id="checkall" onclick="ckall()" />
<label for="checkall">全选</label>
<hr />
<div class="checkarea">
<div><input type="checkbox" name="ipt" />html</div>
<div><input type="checkbox" name="ipt" />css</div>
<div><input type="checkbox" name="ipt" />javascript</div>
<div><input type="checkbox" name="ipt" />php</div>
<div><input type="checkbox" name="ipt" />vue.js</div>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-04 09:05:12
老师总结：checkbox的name属性, 通过会用数组语法, 你可以试试看,这样可以简化
