0

いくつかのラジオ ボタンを含むページをコーディングしていますが、問題が発生しています。ここに私の現在の出力があります

ここに画像の説明を入力

以下は私のコードです

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        #sitehtn {
            display: none
        }

        .container {
            width: 100%;
            height: 600px;
            background-color: rgb(179, 174, 174);
        }
        #datepickerT {
            margin-left: 2em;
        }
        .eventDateDiv {
            height: 150px;
            width: 30%;
            margin-left: auto;
            margin-right: auto;
        }
        #daysBetween {
            margin-top: -1.4em;
            margin-left: 30%;
        }
        .eventShowDiv {
            height: 250px;
            width: 30%;
            margin-left: auto;
            margin-right: auto;
        }
        .event {
            color: green;
            margin-top: 5px;
        }
    </style>
    <script>
        $(function() {
            $( "#datepickerF" ).datepicker({
                      showOn : "button",
                 buttonImage : "calendar.gif",
             buttonImageOnly : true
            });

            $( "#datepickerT" ).datepicker({
                      showOn : "button",
                 buttonImage : "calendar.gif",
             buttonImageOnly : true
            });

            $('#getdays').click(function() {
                var start = $('#datepickerF').datepicker('getDate');
                var end   = $('#datepickerT').datepicker('getDate');
                var days   = (end - start)/1000/60/60/24;
                document.getElementById("daysBetween").innerText=days;
            });

            $('input[type=radio]').change(function() {
                $('#sitehtn').hide()
                $(this).parent().next().show()
            });

            function displayResult(browser) {
                document.getElementById("result").value=browser
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="eventDateDiv">
            <div class="event">
                EVENT DATE
            </div>
            <p>FROM: <input type="text" id="datepickerF" /></p>
            <p>To: <input type="text" id="datepickerT" /></p>
            <button id="getdays">NO.OF DAYS </button>
            <p id="daysBetween"> </p>
        </div> 
        <div class="eventShowDiv">
            <div class="event">
                EVENT SHOW TIME
            </div>
            <p>TYPE OF SHOW: </p>
            <label>
                <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" />
                Unique
            </label>
            <input type="text" name="site" id="sitehtn" />
            <br />
            <label>
                <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
                Varied
            </label>
            <input type="text" name="textfield3" id="sitehtn" />
        </div> 
    </div> 
</body>
</html>

私の実際の期待される出力は次のとおりです。

  1. Unique radioButton をクリックすると、テキストボックスが表示され、自動的に Next Radio Button(Varied) が非表示になります

  2. テキスト ボックスには、4 つのテキスト フィールドが含まれます。FROM および TO 日付ピッカー用の 2 つのフィールドと、コンテンツ プレースホルダー、および同じテキスト ボックスの次の行に同じ 4 つのフィールドを追加する最後のボタン

私はこの分野では新しいので、これを解決するにはあなたのサポートと貴重なコメントが必要です.

4

2 に答える 2

0

あなたの一番の質問については、これを試してください。

$('#courtierRadio').on('change', function () {
   $('#sitehtn').show();
   $('#agenceRadio').hide();
});
于 2013-11-09T08:27:27.510 に答える