JS选中单选框，显示DIV层里的内容，默认DIV内容不显示
如题。首先页面加载时DIV里的内容不显示当我选中了某个单选框时，DIV里的内容显示出来。获取单选框框的状态选中则为显示，否则则为隐藏DIV...
如题。
首先页面加载时DIV里的内容不显示
当我选中了某个单选框时，
DIV里的内容显示出来。
获取单选框框的状态 选中则为显示 ，否则则为隐藏DIV 展开
首先页面加载时DIV里的内容不显示
当我选中了某个单选框时，
DIV里的内容显示出来。
获取单选框框的状态 选中则为显示 ，否则则为隐藏DIV 展开
4个回答
展开全部
这个用CSS搭配js就可以解决，通过visibility（占地儿）的hidden或display的none（不占地儿）此元素不会被显示（不占地儿）属性就可以让其默认为不显示，通过js判断当选中单选框时，将目标DIV层的属性改为visible或block即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>无标题文档</title>
<script language="javascript">
function ShowAdmin()
{
with (document.links) {
if (txt[1].checked)
{
logopic.style.display="block";
}
else
{
logopic.style.display="none";
}
}
}
</Script>
</head>
<body>
<input name="txt" type="radio" value="0" checked onClick="ShowAdmin()" />
隐藏
<input name="txt" type="radio" value="1" onClick="ShowAdmin()" />
显示
<div id="logopic" style="display:none">此处显示新 Div 标签的内容</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function ShowAdmin()
{
with (document.links) {
if (txt[1].checked)
{
logopic.style.display="block";
}
else
{
logopic.style.display="none";
}
}
}
</Script>
</head>
<body>
<input name="txt" type="radio" value="0" checked onClick="ShowAdmin()" />
隐藏
<input name="txt" type="radio" value="1" onClick="ShowAdmin()" />
显示
<div id="logopic" style="display:none">此处显示新 Div 标签的内容</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
<style type="text/css">
#all div{
display:none;
}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javaScript">
</script>
<script type="text/javaScript">
function show(obj){
var oDiv = document.getElementById("result"+obj.value);
var aDiv = document.getElementById("all").getElementsByTagName("div");
for(var i=0; i<aDiv.length; i++){
aDiv[i].style.display = "none";
}
oDiv.style.display = "block";
}
</script>
</head>
<body>
<div>
<h3>测试你的性格:</h3>
<div>请选择下列一种水果:</div>
<input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br />
<input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br />
<input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br />
<div id="all">
<div id="result1">
您的性格,很羞涩.
</div>
<div id="result2">
您的性格,很开朗.
</div>
<div id="result3">
您的性格,很内向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
<style type="text/css">
#all div{
display:none;
}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javaScript">
</script>
<script type="text/javaScript">
function show(obj){
var oDiv = document.getElementById("result"+obj.value);
var aDiv = document.getElementById("all").getElementsByTagName("div");
for(var i=0; i<aDiv.length; i++){
aDiv[i].style.display = "none";
}
oDiv.style.display = "block";
}
</script>
</head>
<body>
<div>
<h3>测试你的性格:</h3>
<div>请选择下列一种水果:</div>
<input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br />
<input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br />
<input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br />
<div id="all">
<div id="result1">
您的性格,很羞涩.
</div>
<div id="result2">
您的性格,很开朗.
</div>
<div id="result3">
您的性格,很内向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
