摘要：看起來很簡單的一個小練習卻做了半天，代碼卻并不多，看來還得多多練習，溫故而知新。我好像沒記得checkbox和label的用法？是不是前面沒講還是我漏看了？老師我發(fā)現(xiàn)幾個問題麻煩解答一下，謝謝：1 --true和false可以分別用非0 和 0代替，也不能加引號，否則會被認為是字符串，類型就變成true了,是這么理解嗎？2 &nbs
看起來很簡單的一個小練習卻做了半天，代碼卻并不多，看來還得多多練習，溫故而知新。
我好像沒記得checkbox和label的用法？是不是前面沒講還是我漏看了？
老師我發(fā)現(xiàn)幾個問題麻煩解答一下，謝謝：
1 --true和false可以分別用非0 和 0代替，也不能加引號，否則會被認為是字符串，類型就變成true了,是這么理解嗎？
2 -- if (ocheckall.checked)，這個括號內(nèi)的內(nèi)容不是判斷是否點擊了選擇框的意思嗎？為什么不能寫成ocheckall.checked=true？？
3 --name可以當id或class來用嗎？如果可以，name的css選擇器是什么呢？
全選功能的js代碼主要實現(xiàn)方法：
綁定元素、聲明函數(shù)，for循環(huán)向數(shù)組內(nèi)添加數(shù)據(jù)、if else語句控制checked值為true或false、用onclick方法調(diào)用函數(shù)。
涉及到的其它知識有：label中用for+"id名"綁定點擊的范圍；
實現(xiàn)結(jié)果：
代碼：
<!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
老師總結(jié)：checkbox的name屬性, 通過會用數(shù)組語法, 你可以試試看,這樣可以簡化