0

人々が「片道」チケットまたは「往復」のいずれかをチェックする連絡フォームを作成しようとしています。

ユーザーが連絡先フォームに到達すると、最初の「一方向」がチェックされ、1 つの日付フィールドが表示されますが、「往復」がチェックされている場合は、2 番目の日付フィールドに戻り日が表示されるようにします。

何か案は？

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

そのような依存/バインディング機能は通常の htmlフォーム要素には付属していないため、これを達成するにはJavaScriptとイベントハンドラーを使用する必要があります (混乱を避けるため: 潜在的な子にも同じことが言えます)。

この回答は、同様の問題/リクエストに関連する質問に回答するため、その方法のかなり良いヒントを提供します: 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 に答える