編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，實(shí)現(xiàn)計算選項(xiàng)功能，當(dāng)用戶點(diǎn)擊按鈕時，計算出已選的總數(shù)，并顯示結(jié)果，如果未選擇，則隱藏結(jié)果。
效果圖:
任務(wù)
一、監(jiān)聽確定按鈕點(diǎn)擊事件，計算選項(xiàng)中的已選數(shù)目，并根據(jù)數(shù)目來更新結(jié)果。
提示:
1. 遍歷所有的勾選框，計算出已選總數(shù),存放在變量checked。
2. 根據(jù)checked值更新結(jié)果，如果大于0，則更新結(jié)果的節(jié)點(diǎn)的innerHTML為已選數(shù)目并顯示，反之，清空其innerHTML并隱藏。
說明: 任務(wù)在21和29行。
- ?不會了怎么辦
-
可參考下面代碼或者在右下角"課件下載"區(qū)下載參考代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
// h獲取元素
var list = document.getElementById('list');
var inputs = list.getElementsByTagName('input');
var ret = document.getElementById('ret');
var ok = document.getElementById('ok');
// 添加按鈕點(diǎn)擊事件
ok.onclick = function () {
var i = 0,
len = inputs.length,
checked = 0;
// 遍歷所有的勾選框，計算出已選總數(shù),存放在變量checked
while(i < len) {
}
//根據(jù)checked值更新結(jié)果
}
}
</script>
</head>
<body>
<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>
</ul>
<button id="ok">確定</button>
<p id="ret" style="display: none"></p>
</body>
</html>
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
