javascript - 选中单选按钮时显示第二个 div

标签 javascript html css radio-button

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

当用户到达联系表单并显示一 (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>

关于javascript - 选中单选按钮时显示第二个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11743069/

相关文章:

html - 带有 svg 背景图像的 Div

css - 过度使用嵌套 DIV。不好的做法还是对搜索引擎索引不利?

javascript - 尝试在循环中等待对象的元素

javascript - CSSStyleDeclaration 的 getPropertyValue() 和方括号 [] 之间有区别吗?

javascript - 从外部调用 webpacked 代码(HTML 脚本标签)

JavaScript 触发太多事件?

javascript - 如何禁用浏览器菜单栏中的刷新按钮

html - CSS 获得 block 级透明度

html - 如何在 Express (Node.js) 模板中为 Internet Explorer 保留条件 CSS 语句

javascript - 悬停时 HTML/JavaScript 展开按钮/div