选中单选按钮时显示第二个 div答案

【问题标题】：Show 2nd div when radio button checked选中单选按钮时显示第二个 div
【发布时间】：2012-07-29 09:27:40
【问题描述】：

我正在尝试制作一个联系表格，人们将在其中检查“单程”票或“往返”票。

当用户到达联系表格并显示一（1）个日期字段时，会检查第一个“单向”，但如果选中“往返”，我希望显示第二个日期字段和返回日期。

有什么想法吗？

【问题讨论】：

我建议你看看这个帖子：stackoverflow.com/questions/6017558/… 使用基于复选框是否选中的 Ajax 调用，您可以使第二个字段出现或消失。
我真的很想把 Ajax 留在外面。只要选中第一个单选按钮，我只是想隐藏一个带有第二个日期字段的 div。所以我想要的只是某种类型的 js，它使用 onchange 或从 display:none 更改为 display:block 的东西。
我同意在您的情况下不需要 Ajax，javascript 会好得多。
回答...stackoverflow.com/a/5137316/1093284 显示了“复选框影响两个输入的可见性”示例。没有 ajax，只有漂亮的 jQuery。 ;)
顺便问一下，你有没有尝试过或对这个问题做过任何研究？在没有任何证据表明您尝试过某事并陷入困境的情况下提出这样的问题（初学者，常见任务）是不受欢迎的。

标签： javascript html css button radio

【解决方案1】：

只需观察单选按钮的 onchange 事件。当它到达时，您可以检查天气单程或往返选择，然后显示/隐藏带有返回日期字段的 div。

<!DOCTYPE html>
<head>
<script>
    function hdl_change(e) {
        document.getElementById('date2').style.visibility = 
            e.checked && e.id == 'opt_2' ? 'visible' : 'hidden';
    }
</script>
</head>
<body>
<form name="myForm">
  <input id="opt_1" type="radio" name="trip" value="oneway" onchange="hdl_change(this)"> One way<br>
  <input id="opt_2" type="radio" name="trip" value="round" onchange="hdl_change(this)"> Roundtrip<br>
</form>
<div id="date1"> date 1 stuff ...</div>
<div id="date2" style="visibility:hidden">  date 2 stuff ...</div>
</body>
</html>

【讨论】：

感谢费边！正是我想要的！

【解决方案2】：

您需要使用 javascript 和 on-event 处理程序来完成此操作，因为不附带 dependent/binding 功能常规的 html form 元素（为避免混淆：潜在的子元素也是如此）。

此答案将为您提供一个很好的提示，因为它回答了与类似问题/请求相关的问题：https://stackoverflow.com/a/5137316/1093284

更新：

由于您似乎不是很有经验，这里有一个最简单的例子：

<!-- include jquery.js library first  (http://jquery.com/) -->
<script src="jquery.js"></script>

<!-- then work the magic -->
<script>
$(document).ready(function(){

    $('#inputB').hide;

    $('#checkboxA').click(
        function(e){
                $('#inputA').show;
                $('#inputB').hide;
        });
    $('#checkboxB').click(
        function(e){
                $('#inputB').show;
                $('#inputA').hide;
        });
});
</script>

如果你足够适合使用 jQuery，请查看此页面上的其他答案https://stackoverflow.com/a/11743381/1093284

最后但并非最不重要的一点是，我认为https://stackoverflow.com/a/11743482/1093284 的答案提供了最佳解决方案，因为它很小并且不需要完整的 32kb javascript 库。另一方面，内联 javascript 实际上是不可行的。无论如何...重要的是用户，他们更喜欢加载速度更快的页面，而不是窗帘后面编码精美的内容。

【讨论】：