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

编程练习

小伙伴们，根据所学知识，实现网页合同查看功能， 当勾选了“同意条款”，则允许用户进行下一步操作。

效果图:

任务

一、监听勾选框的onchange事件，并根据自身的checked值，显示隐藏“下一步按钮”。

提示:
  1.当自身的checked为true时，按钮显示，反之隐藏。

注意：初始状态按钮是隐藏的，勾选框为非选中状态

      

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         #btn {
  8.             display: none;
  9.         }
  10.     </style>
  11.     <script type="text/javascript">
  12.         window.onload = function () {
  13.  
  14.             // 获取元素
  15.             var inp = document.getElementById('inp');
  16.             var btn = document.getElementById('btn');
  17.  
  18.             inp.onchange = function () {
  19.                 var checked = this.checked;
  20.  
  21. // 根据checked 值来显示隐藏按钮
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.             }
  29.         }
  30.     </script>
  31. </head>
  32. <body>
  33. <div>
  34.     <p>我是内容条款！</p>
  35.     <p>我是内容条款！</p>
  36.     <p>我是内容条款！</p>
  37.     <p>我是内容条款！</p>
  38.     <p>我是内容条款！</p>
  39.     <p>我是内容条款！</p>
  40. </div>
  41. <label><input id="inp" type="checkbox"/> 同意条款</label>
  42. <p><button id="btn">下一步</button></p>
  43. </body>
  44. </html>
下一节