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

    0. 简介 在LaTex编辑时,有时会遇到这样一个有关于首行缩进的问题.在汉语环境的编辑下,习惯上每段会进行一个两个字的缩进.但是在默认编辑模式下,一个章节下的首段是没有首行缩进的,本文的目的主要是解 ...

  2. [题解]poj 1274 The Prefect Stall

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22736   Accepted: 10144 Description Far ...

  3. 更改Windows系统时间同步频率【windows 7,windows 8,win10】

    Windows系统默认的时间同步间隔是7天,如果我们需要修改同步的时间间隔(同步频率),我们可以通过修改注册表来手动修改它的自动同步间隔以提高同步次数,保证时钟的精度,windows7,Windows ...

  4. 問題排查：行動裝置網頁前端 UI 設計 (2)

    之前上網找了個星級評分的範例來玩, 當然這個範例已經用在另一個專案了, 目前看起來沒什麼狀況, 不過在移植到目前的專案之後, 就出現了怪現象: 1. 在大部份時間裡,點擊星星不會有任何反應 2. 即便 ...

  5. 编写出色的GNU/Linux程序

    http://advancedlinuxprogramming.com提供了本书电子版的免费下载. 1 与执行环境交互 关于参数 C语言程序的main()函数使用两个参数和执行环境交互--(int)a ...

  6. Github两步认证

    获取密钥:ssh-keygen -t rsa  切换到公钥所在路径:cd .ssh 查看该路径下的所有文件:ls 查看公钥:cat id_rsa.pub 获取密钥之后,去https://github. ...

  7. 基于选择重传ARQ传输协议的数据重传机制方案设计

    原文链接: http://blog.csdn.net/pinghegood/article/details/7841281  1.背景 最近在项目中,由于使用TD网络传输数据,数据掉包严重,软件组老大 ...

  8. 反射中通过class标记来获取字段及方法

    //这是通过class标记获取字段的代码 Field[] fields= classzz.getDeclaredFields(); //获取该class标记的表名代码,必须为,getSimpleNam ...

  9. JQuery一些基础笔记

    JQuery学完了,总结一下一些需要掌握的知识点.首先什么是JQuery 说白了就是有JavaScript衍生出来的一个产物,它呢兼容各种浏览器,但是前提你要用这个JQ的话首先呢你就要引入JQ库.学过 ...

  10. MySQL关键性能监控(QPS/TPS)

    原文链接:http://www.cnblogs.com/chenty/p/5191777.html 工作中尝尝会遇到各种数据库性能调优,除了查看某条SQL执行时间长短外,还需要对系统的整体处理能力有更 ...