100小站

最简洁的checkbox和radio显示隐藏div效果

来源:良言     发布时间:2016-02-16 15:23:48     浏览量:20438

<!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=gb2312" />
<title>最简洁的checkbox和radio显示隐藏div效果</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>checkbox例子</p>
<label>
    <input type="checkbox" name="checkbox" id="checkbox" onclick="this.checked?p.style.display='block':p.style.display='none';" />
    100下载站</label>
<div id="p" style="display:none"> 最好的下载站:<a href="http://www.100xz.com">www.100xz.com</a></div>
<p></p>
<p>radio例子</p>
<label>
    <input type="radio" name="lbh" value="7say" checked="checked" onclick="say.style.display='block';xz.style.display='none';" />
    www.7say.com</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<label>
    <input type="radio" name="lbh" value="100xz" onclick="say.style.display='none';xz.style.display='block';" />
    www.100xz.com</label>
<p></p>
<div id="say" style="display:block">博客:<a href="http://www.7say.com">看上去很美</a></div>
<div id="xz" style="display:none">下载站:<a href="http://www.100xz.com">www.100xz.com</a></div>
</form>
</body>
</html>
版权所有 © 100小站 2008-2019 All Rights Reserved,新ICP备10003314号-1

新公网安备 65010302000133号