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