0

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

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

有任何想法吗？

4

2 回答 2

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>
于 2012-07-31T15:21:28.737 回答
0

您需要使用javascript和事件处理程序来完成此操作，因为常规 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 实际上是不可行的。无论如何……重要的是用户，他们更喜欢加载速度更快的页面，而不是窗帘后面编码精美的内容。

于 2012-07-31T15:05:51.823 回答