Question

我试图建立一个联系表格，人们会检查“单程”票或“往返”。

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

有什么想法吗？

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

Answer 2

您需要使用 javascript 和 on-event 处理程序来实现这一点，因为依赖/绑定功能不会随附常规的html 表单元素（为了避免混淆：同样适用于潜在的孩子）。

这个答案将为您提供一个很好的提示，如何回答与类似问题/请求相关的问题：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实际上是禁止的。无论如何......这些用户都很重要，他们更喜欢在窗帘后面加上编码更快的页面。

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

2 个答案: