注册时经常用到的点击复选框显示选填信息

现在的位置: 首页＞JavaScript＞正文

上篇下篇

注册时经常用到的点击复选框显示选填信息

2010年05月28日 ⁄ JavaScript ⁄ 暂无评论 ⁄ 被围观 716+

    今天公司在开会的时候谈到业务部门的一个需求，就是把必填项显示出来，然后点击一个选项框来让用户选择是否填写其他的选填信息，然后自己试着弄了一个，供大家参考。
    很简单，就是用了一个选项框的里面chicked属性和样式里面的display属性，加上一个条件判断就行。
    下面是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>注册时候常用的点击显示选填信息</title> <style type="text/css"> body{ font-size:12px; font-family:tahoma; padding:0px; margin:0px;} .content{ width:400px; overflow:hidden; margin:60px auto auto auto; line-height:20px; border:1px #CCC solid;} .content span{ padding-left:5px;} input{ width:120px; height:20px; vertical-align:middle; line-height:20px;} .chickbox{ width:15px; vertical-align:middle;} .chickarea{ width:400px; overflow:hidden; display:none;} </style> <script language="javascript" type="text/javascript"> function chickarea(){ var chickboxs = document.getElementById("chickboxs"); var chickarea = document.getElementById("chickarea"); if (chickboxs.checked == true){ chickarea.style.display = "block"; } else { chickarea.style.display = "none"; } } </script> </head> <body> <div class="content"> <p><span>用户名：<input name="userid" type="text" /></span></p> <p><span>密   码：<input name="pwd" type="password" /></span></p> <p><span><input name="" type="checkbox" value="" class="chickbox" id="chickboxs" onclick="chickarea()" /> 点击显示其他选填信息</span></p> <div class="chickarea" id="chickarea"> <p><span>老婆名：<input name="wife" type="text" /></span></p> <p><span>老公名：<input name="has" type="text" /></span></p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。