js勾选时显示相应内容

使用环境，
一、比如用户勾选时显示一些安全方面提示“你真的要自动登录吗？这将使你下次不需要密码即可进入你的个人中心。”
二、显示其他预设选项，以方便用户选择输入，比如密保问题设置，当用户不想使用自定义设置时可以勾选预设问题。
实现思路，
点击时判断一个变量单双数，修改每次点击的状态。在每个情况下同时修改input和div的状态就可以了。哦对了这里的默认的input就有一个“选中”和“不选中”的表示状态的如果要自定义样式的时候，修改input的样式吧。

<!--
Author: XiaoWen
Create a file: 2016-12-07 10:30:15
Last modified: 2016-12-07 10:52:17
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>勾选时显示相应内容</title>
</head>
<body>
  <input type="checkbox" id="enter"><label for="enter">自动登录</label>
  <div style="display:none">你真的要自动登录吗？这将使你下次不需要密码即可进入你的个人中心。</div>
  <script>
    var i=1;
    var ipt=document.getElementsByTagName("input");
    var div=document.getElementsByTagName("div");
    ipt[0].onclick=function(){if(i%2==0){
        div[0].style="display:none";
      }else{
        div[0].style="display:block";
      }
      i++;
    }
  </script>
</body>
</html>

还可以使用 三目运算符 或直接判断 input 的选中状态 checked 。

    var ipt=document.getElementsByTagName("input")[0];
    var div=document.getElementsByTagName("div")[0];
    ipt.onclick=function(){
      // if(ipt.checked==true){
      //   div.style="display:block";
      // }else{
      //   div.style="display:none";
      // }
      (ipt.checked==true) ? div.style="display:block" : div.style="display:none"
    }

相似例子：

点击显示隐藏：http://www.cnblogs.com/daysme/articles/6140163.html

posted @ 2016-12-07 10:54  程序媛李李李李蕾  阅读(2121)  评论(0)  编辑  收藏  举报