js实现当复选框选择匿名登录时隐藏登录框效果


Posted in Javascript onAugust 14, 2015

本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果。分享给大家供大家参考。具体如下:

本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码。

运行效果如下图所示:

js实现当复选框选择匿名登录时隐藏登录框效果

在线演示地址如下:

具体代码如下:

<title>当复选框选择匿名登录时隐藏登录框</title>
<style>.a #login,#uname{display:none;}.a #uname{display:inline;}</style>
<body>
<div>
<span id="login">帐号:<input type="text" /> 密码:<input type="text" /> <input type="submit" value="登录" /></span>
<span id="uname">网友姓名:<input type="text" /></span>
<input type="checkbox" id="check" onclick="this.parentNode.className=this.checked?'a':'';" />匿名</div>
</body>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 #Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 #Javascript
js实现表单检测及表单提示的方法
Aug 14 #Javascript
JavaScript中的this关键字使用详解
Aug 14 #Javascript
JS实现双击编辑可修改状态的方法
Aug 14 #Javascript
JavaScript变量的作用域全解析
Aug 14 #Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 #Javascript
You might like
我的论坛源代码(七)
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
django+echart数据动态显示的例子
2019/08/12 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
电视购物广告词
2014/03/19 职场文书
社团活动总结范文
2014/04/26 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
公务员政审材料
2014/12/23 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
MySQL分区表实现按月份归类
2021/11/01 MySQL