js勾选时显示相应内容

时间：2023-03-10 01:56:44
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

相关文章