2-6 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现计算选项功能，当用户点击按钮时，计算出已选的总数，并显示结果，如果未选择，则隐藏结果。

效果图:

任务

一、监听确定按钮点击事件，计算选项中的已选数目，并根据数目来更新结果。

提示:
  1. 遍历所有的勾选框，计算出已选总数,存放在变量checked。
  2. 根据checked值更新结果，如果大于0，则更新结果的节点的innerHTML为已选数目并显示，反之，清空其innerHTML并隐藏。

说明: 任务在21和29行。 

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.  
  9.             // h获取元素
  10.             var list = document.getElementById('list');
  11.             var inputs = list.getElementsByTagName('input');
  12.             var ret = document.getElementById('ret');
  13.             var ok = document.getElementById('ok');
  14.  
  15.             // 添加按钮点击事件
  16.             ok.onclick = function () {
  17.                 var i = 0,
  18.                     len = inputs.length,
  19.                     checked = 0;
  20.  
  21.                 // 遍历所有的勾选框，计算出已选总数,存放在变量checked
  22.                 while(i < len) {
  23.  
  24.  
  25.  
  26.  
  27.                 }
  28.  
  29.                 //根据checked值更新结果
  30.  
  31.  
  32.  
  33.  
  34.             }
  35.  
  36.         }
  37.     </script>
  38. </head>
  39. <body>
  40. <ul id="list">
  41.     <li><label><input type="checkbox"/>1</label></li>
  42.     <li><label><input type="checkbox"/>2</label></li>
  43.     <li><label><input type="checkbox"/>3</label></li>
  44.     <li><label><input type="checkbox"/>4</label></li>
  45.     <li><label><input type="checkbox"/>5</label></li>
  46. </ul>
  47. <button id="ok">确定</button>
  48. <p id="ret" style="display: none"></p>
  49. </body>
  50. </html>
下一节