使用环境，
一、比如用户勾选时显示一些安全方面提示“你真的要自动登录吗？这将使你下次不需要密码即可进入你的个人中心。”
二、显示其他预设选项，以方便用户选择输入，比如密保问题设置，当用户不想使用自定义设置时可以勾选预设问题。
实现思路，
点击时判断一个变量单双数，修改每次点击的状态。在每个情况下同时修改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" }
相似例子：