单击第二个单选按钮时要显示的 div 内的信息
[英]Information inside the div to be displayed when the second radio button is clicked
问题描述
I have two radio buttons and a div:
我有两个单选按钮和一个 div：
<input type='radio' name='option' value='test1' />
<input type='radio' name='option' value='test2' />
<div style="display:none">
Hidden info
</div>
What I would like is for the information inside the div to be displayed when the second radio button is clicked, but as soon as they switch to the other radio button I would like it to go away.我想要的是在单击第二个单选按钮时显示 div 内的信息，但是一旦它们切换到另一个单选按钮，我希望它消失。 I would also like to do this in raw JavaScript.我也想在原始 JavaScript 中做到这一点。
How can I do it?我该怎么做？
6 个解决方案
解决方案1
1 2011-08-06 12:33:06
You can hook the click event on both of the radio buttons, and then use the checked property of the one you're interested in to determine the visibiilty of the div via its .style.display property ("none" for hidden, "" for default [block]).您可以勾click两个单选按钮的事件，然后使用checked的一个你感兴趣的属性来确定的visibiilty div通过其.style.display财产（“无”隐藏“”对于默认 [块]）。
There are a variety of ways you can access the DOM elements for the radio buttons and div .您可以通过多种方式访问单选按钮和div的 DOM 元素。 One of the easiest is if you give them id values:最简单的方法之一是如果你给他们id值：
<input id="rdoTest1" type='radio' name='option' value='test1' />
<input id="rdoTest2" type='radio' name='option' value='test2' />
<div id="targetDiv" style="display:none">
Hidden info
</div>
Then it's simply ( live example ):然后它很简单（现场示例）：
(function() {
var rdoTest1 = document.getElementById("rdoTest1"),
rdoTest2 = document.getElementById("rdoTest2"),
targetDiv = document.getElementById("targetDiv");
rdoTest1.onclick = rdoTest2.onclick = handleClick;
function handleClick() {
targetDiv.style.display = rdoTest2.checked ? "" : "none";
}
})();
Ensure that that script is at the end of the body element, or wrap it in a window.onload or similar handler.确保该脚本位于body元素的末尾，或将其包装在window.onload或类似的处理程序中。
But if you can't or don't want to use id values, there are a lot of other ways to find the elements — getElementsByTagName and then find them by their name , etc.但是，如果您不能或不想使用id值，还有很多其他方法可以找到元素 — getElementsByTagName 然后通过它们的name找到它们，等等。
Handy reference material:方便参考资料：
解决方案2
0 2011-08-06 12:36:05
This is straight out of my head, didn't test it but i think it should do the trick这完全是我的想法，没有测试过，但我认为它应该可以解决问题
<script type="text/javascript">
function toggleDiv() {
var e = document.getElementById('toggle');
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
</script>
<input type='radio' name='option' value='test1' onclick="toggleDiv()" />
<input type='radio' name='option' value='test2' onclick="toggleDiv()" />
<div id="toggle" style="display:none">
Hidden info
</div>
解决方案3
0 2011-08-06 12:40:11
Add and Id to each on the input elements: Add 和 Id 到每个输入元素上：
<input type='radio' name='option' id="option_1" value='test1' />
<input type='radio' name='option' id="option_2" value='test2' />
<div style="display:none" id="message">Hidden info</div>
With javascript reference each of the radio button, and assign the visibility according to their status:使用 javascript 引用每个单选按钮，并根据其状态分配可见性：
option1 = document.getElementById("option_1");
option2 = document.getElementById("option_2");
message = document.getElementById("message");
option1.onclick = function(){
message.style.display = "block";
}
option2.onclick = function(){
message.style.display = "none";
}
解决方案4
0 2011-08-06 12:47:59
<script type="text/javascript">
function eventHandler (e) {
if (! e)
e = event;
return e.target || e.srcElement;
}
function handleDivShowing(e) {
var radio = eventHandler (e);
var div = document.getElementById('divToShow');
if(radio.value == 'test2') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
<input type='radio' name='option' value='test1' onclick="handleDivShowing(event)" />
<input type='radio' name='option' value='test2' onclick="handleDivShowing(event)" />
<div id="divToShow" style="display:none">
Hidden info
</div>
With event handling you have a more generic solution, valid for more than one case.通过事件处理，您有一个更通用的解决方案，对不止一种情况有效。 Regards.问候。
解决方案5
0 2011-08-06 13:30:44
Here is the code you need:这是您需要的代码：
<html>
<head>
<script type="text/javascript">
function showhide()
{
var opt2 = document.getElementById("option_2");
var msg = document.getElementById("message");
if(opt2.checked)
{
msg.style.visibility = "visible";
}
else {
msg.style.visibility = "hidden";
}
}
</script>
</head>
<body>
<!--The ID is not necessary in the first radio button-->
<input type="radio" name="option" value="test1" id="option_1" onclick="showhide()" />
<input type="radio" name="option" value="test2" id="option_2" onclick="showhide()" />
<div style="visibility:hidden;" id="message">Hidden info</div>
</body>
</html>
解决方案6
0 2011-08-07 00:32:52
<input type='radio' name='option' value='test1' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='none'):(document.getElementById('yourdiv').style.display='block'))" />
<input type='radio' name='option' value='test2' onchange="((this.checked==true)?(document.getElementById('yourdiv').style.display='block'):(document.getElementById('yourdiv').style.display='none'))" />
<div id="yourdiv" style="display:none">
Hidden info
</div>
It is a little bit long but it works.它有点长，但它有效。 -- > Live Demo < -- > 现场演示 <
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.