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

js勾选时显示相应内容的更多相关文章

  1. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  2. radio和checkbox的js勾选使用

    Html: <table> <tr><th class="w1">党内职务</th><td colspan="3&q ...

  3. js实现长按显示全部内容

    js实现文字超出省略号显示时长按显示全部 元素内容超出省略号显示时长按该元素,生成toast弹窗(id:toolkitContainer),以显示全部内容 #toolkitContainer { ma ...

  4. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

  5. element checkbox 勾选时出现弹框提示。

    复选框选中的时候,必须提示是否确定选中,取消勾选的时候也要. 不能解决的思路: 1.element的checkbox只有一个change事件,该事件只返回该选项最新的值(true,false)(不会返 ...

  6. 用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容

    <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...

  7. CAD鼠标移动到对象时显示对象内容

    //定义事件         Editor ed = doc.Editor;         ed.PointMonitor += new PointMonitorEventHandler(ed_Po ...

  8. easyui字典js 切换 jsp页面显示的内容

    在列表中直接切换 formatter: function (value) {var name;if(value==0){name='待审批'}else if(value==1){name='通过'}e ...

  9. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

随机推荐

  1. dynamic2016 crm 安装语言包提示缺少组件报错

    当安装dynamic2016 CRM英文语言包安装成功后,在系统切换语言的时候提示如下报错为缺少CRM reporting extensions 插件导致,在CRM的解压安装包如下路径找到对应的执行文 ...

  2. 阅读笔记 The Impact of Imbalanced Training Data for Convolutional Neural Networks [DegreeProject2015] 数据分析型

    The Impact of Imbalanced Training Data for Convolutional Neural Networks Paulina Hensman and David M ...

  3. DataTable以列分组

    //DataTable以列分组 var result = from r in dt.AsEnumerable() group r by ), b = r.Field<) } into g sel ...

  4. LeetCode(三)

    最长不重复子串 public class Solution { public int lengthOfLongestSubstring(String s) { if(s==null || s.leng ...

  5. Java 测试URL地址是否能正常连接

    public static int testWsdlConnection(String address) throws Exception { int status = 404; try { URL ...

  6. Verilog之串口(UART)通信

    0:起始位,低电平:1~8:数据位:9:校验位,高电平:10:停止位,高电平. 波特率 “9600bps”表示每秒可以传输9600位. 波特率定时计数器由时钟频率除以波特率. 采集1~8位,忽略0.9 ...

  7. Hibernate缓存之初探

    数据层的访问效率优化可能第一想到的就是利用缓存,缓存的机能可以简单理解为将从数据库中访问的数据放在内存中,在以后再次使用到这些数据时可以直接从内存中读取而不必要再次访问数据库,尽量减少和数据库的交互提 ...

  8. java线程小结2

    本文我们来总结一下可以改变线程状态的若干方法. 一. Thread类中的方法 1.sleep sleep方法属于Thread类,它相当于让线程睡眠,交出CPU,让CPU去执行其他的任务. 但是slee ...

  9. 10个超级有用、必须收藏的PHP代码样例

    在PHP的流行普及中,网上总结出了很多实用的PHP代码片段,这些代码片段在当你遇到类似的问题时,粘贴过去就可以使用,非常的高效,非常的省时省力.将这些程序员前辈总结出的优秀代码放到自己的知识库中,是一 ...

  10. FastDFS基本结构（转）

    0．简介 FastDFS是基于互联网应用的开源分布式文件系统,主要用于大中型网站存储资源文件,如图片.文档.音频.视频等.FastDFS采用类似GFS的架构,用纯C语言实现,支持Linux.FreeB ...