用RadioButten（或CheckBox）实现div的显示与隐藏
1，用RadioButten（或CheckBox）实现div的显示与隐藏
<!DOCTYPE html>
<html>
<head runat="server">
<title>
用RadioButten（或CheckBox）实现div的显示与隐藏
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Radio1" name="11" onclick="show2()" type="radio" checked="checked"/>
男
<input id="Radio2" name="11" onclick="show2()" type="radio" />
女
</div>
<div id="nvInfo" style="display: block;">
aaa
</div>
<div id="nvInfoa" style="display: none;">
bbbb
</div>
</form>
</body>
<script language="javascript" type="text/javascript">
function show2() {
if (document.getElementById("Radio2").checked) {
document.getElementById("nvInfo").style.display = "none";
document.getElementById("nvInfoa").style.display = "block";
}
else {
document.getElementById("nvInfo").style.display = "block";
document.getElementById("nvInfoa").style.display = "none";
}
}
</script>
</html>
2， 更换 radio 背景样式选中
<!DOCTYPE html>
<html>
<head runat="server">
<title>
更换 radio 背景样式选中
</title>
<style type="text/css">
#settledrunning{
width: 100%;
height:79px;
position: absolute;
}
.sex{
width:25px;
height: 25px;
position: absolute;
opacity: 0;
z-index: 3;
}
.sex1{
margin-left: 8px;
margin-top: 5px;
}
.dianji{
width:25px;
height:25px;
position: absolute;
background: url("./image/checkBox_unCheck.png") no-repeat;
z-index: 2;
}
.dianji1{
margin-left: 8px;
margin-top: 5px;
}
#settledrunning input:checked + .dianji{
background: url("./image/checkBox_Check.png") no-repeat;
}
.settled{
width: 131px;
height:38px;
background: url(./image/btnBg.png) no-repeat;
position: absolute;
top: 15px;
left: 50px;
}
.running{
width: 131px;
height:38px;
background: url(./image/btnBg.png) no-repeat;
position: absolute;
top: 15px;
left: 195px;
}
.settled-txt{
margin-top: 7px;
margin-left: 42px;
font-size: 13px;
color: #153d6c;
}
.running-txt{
margin-top: 7px;
margin-left: 42px;
font-size: 13px;
color: #153d6c;
}
</style>
</head>
<body>
<div id="settledrunning">
<div class="settled">
<input id="Radio1" onclick="show2()" checked="checked" class="sex sex1" name="sex" type="radio" value=""/>
<div class="dianji dianji1"></div>
<p class="settled-txt">Settled</p>
</div>
<div class="running">
<input id="Radio2" onclick="show2()" class="sex sex1" name="sex" type="radio" value=""/>
<div class="dianji dianji1"> </div>
<p class="running-txt">Running</p>
</div>
</div>
</body>
</html>
