編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，使用JS完成一個列表項(xiàng)的選擇功能，包括全選，單選，并計(jì)算已選的數(shù)目。
效果圖:
溫馨提示:完成任務(wù)后，請驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務(wù)
一、靜態(tài)布局制作，實(shí)現(xiàn)廣告部分和正文部分。
提示:
使用li標(biāo)簽存放選項(xiàng)。
二、用JS實(shí)現(xiàn)選擇功能。
1. 計(jì)算已選項(xiàng)函數(shù)：
提示:
1）說明一個變量ret，初始值為零
2）變量所有列表項(xiàng)，如果此項(xiàng)已選，ret自加1
3）把ret的最終值寫入顯示結(jié)果的元素的html里
2. 添加全選框的onchange事件：
提示:
1）遍歷所有列表項(xiàng)，把每一項(xiàng)的checked值改為全選框的checked值
2）調(diào)用計(jì)算已選項(xiàng)函數(shù)
3. 添加每個列表項(xiàng)的事件
提示:
遍歷所有列表項(xiàng)，為每一項(xiàng)添加onchange事件，調(diào)用計(jì)算已選項(xiàng)函數(shù)
注意：只要有一項(xiàng)未選擇，則要把全選框的checked變更false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body {
padding: 20px;
}
li {
float: left;
margin: 20px;
}
#total {
clear: both;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 獲取元素
var all = document.getElementById('all');
var list = document.getElementById('list');
var inputs = list.getElementsByTagName('input');
var total = document.getElementById('total');
// 計(jì)算已選項(xiàng)的總數(shù)
// 全選事件
// 每個選項(xiàng)的事件
}
</script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全選</label></div>
<ul id="list">
<li><label><input type="checkbox"/>選項(xiàng)1</label></li>
<li><label><input type="checkbox"/>選項(xiàng)2</label></li>
<li><label><input type="checkbox"/>選項(xiàng)3</label></li>
<li><label><input type="checkbox"/>選項(xiàng)4</label></li>
<li><label><input type="checkbox"/>選項(xiàng)5</label></li>
<li><label><input type="checkbox"/>選項(xiàng)6</label></li>
</ul>
<div id="total">已選：0 項(xiàng)</div>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
