单击第二个单选按钮时要显示的 div 内的信息

发布于 2024-11-28 00:32:01 字数 327 浏览 2 评论 0原文

我有两个单选按钮和一个 div：

<input type='radio' name='option' value='test1' />
<input type='radio' name='option' value='test2' />
<div style="display:none">
    Hidden info
</div>

我想要的是当单击第二个单选按钮时显示 div 内的信息，但是一旦它们切换到另一个单选按钮，我希望它消失。我还想用原始 JavaScript 来完成此操作。

我该怎么做呢？

原文

I have two radio buttons and a 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. I would also like to do this in raw JavaScript.

How can I do it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡Ms空城旧梦 2024-12-05 00:32:01

您可以在两个单选按钮上挂钩 click 事件，然后使用您感兴趣的单选按钮的 checked 属性来确定 的可见性div 通过其 .style.display 属性（“none”表示隐藏，“”表示默认 [block]）。

您可以通过多种方式访问单选按钮和 div 的 DOM 元素。最简单的方法之一是，如果您给它们 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>

那么就很简单（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";
    }
})();

确保该脚本位于 body 元素的末尾，或将其包装在 window.onload 或类似处理程序中。

但是，如果您不能或不想使用 id 值，还有很多其他方法可以查找元素 — getElementsByTagName，然后通过其 名称 等

方便的参考资料：

DOM2 Core
DOM2 HTML
DOM3 核心
HTML5 规范（现在具有 HTML-DOM 绑定，接管 DOM2 HTML）

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]).

There are a variety of ways you can access the DOM elements for the radio buttons and div. One of the easiest is if you give them id values:

<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.

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.

Handy reference material:

DOM2 Core
DOM2 HTML
DOM3 Core
HTML5 Specification (which now has the HTML-DOM bindings, taking over from DOM2 HTML)

回复收藏 0 原文

落叶缤纷 2024-12-05 00:32:01

这直接出自我的脑海，没有测试过，但我认为它应该可以解决问题

<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>

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>

回复收藏 0 原文

烂人 2024-12-05 00:32:01

<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>

通过事件处理，您可以获得更通用的解决方案，适用于多种情况。
问候。

<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.

回复收藏 0 原文

眼中杀气 2024-12-05 00:32:01

为每个输入元素添加和 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>

使用 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";
}

Add and Id to each on the input elements:

<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:

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";
}

回复收藏 0 原文

陌上芳菲 2024-12-05 00:32:01

这是您需要的代码：

    <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>

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>

回复收藏 0 原文

陈独秀 2024-12-05 00:32:01

<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>

它有点长，但很有效。 -- >现场演示<

<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 <

回复收藏 0 原文

~没有更多了~