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. 当我单击唯一单选按钮时，将出现一个文本框并自动隐藏下一个单选按钮（Varied）

  2. 文本框包括..其中的四个文本字段..两个字段用于 FROM 和 TO 日期选择器和一个内容占位符，最后一个按钮将相同的 4 个字段添加到同一文本框中的下一行

由于我是这个领域的新手，我需要您的支持和宝贵的意见来解决这个问题。

4

2 回答 2

1

这可能适用于日期选择器。您必须添加内容持有者和文本框。

    <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: 400px;
                margin-left: 0;
                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 loading() {
                $( ".datepickerF" ).datepicker({
                          showOn : "button",
                     buttonImage : "calendar.gif",
                 buttonImageOnly : true
                });

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

                $('.getdays').click(function() {
                    var start = $(this).prev().prev().find('input').datepicker('getDate');
                    var end   = $(this).prev().find('input').datepicker('getDate');
                    var days   = (end - start)/1000/60/60/24;
                    $(this).next().text(days);
                });

                $('input[id=courtierRadio]').change(function() {
                    $('#hideRadio').html("");
                    $('#hideRadio').append(getAppleInfo());
                });
                function displayResult(browser) {
                    document.getElementById("result").value=browser
                }
            };
            window.onload = loading;

        // anti-pattern! keep reading...
        function getAppleInfo() {
            var eventDateDiv ="";
            eventDateDiv = $("<div></div>").addClass("eventDateDiv");
            eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text")));
            eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text")));
            eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays"));
            eventDateDiv.append($("<p></p>").attr("class", "daysBetween"));
            eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)"));
            return eventDateDiv;

        }
        function belowDiv(self){
            $('#hideRadio').append(getAppleInfo());
            loading();
        }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="eventDateDiv" title="numb">
                <div class="event">
                    EVENT DATE
                </div>
                <p>FROM: <input type="text" class="datepickerF" /></p>
                <p>To: <input type="text" class="datepickerT" /></p>
                <button class="getdays">NO.OF DAYS </button>
                <p class="daysBetween"> </p>
            </div> 
            <div class="eventShowDiv" title="dumb">
                <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"  />
                <br />
                <div id="hideRadio">
                <label>
                    <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" />
                    Varied
                </label>
                <input type="text" name="textfield3" />
                </div>
            </div> 
        </div> 
    </body>
    </html>
于 2013-11-09T23:29:25.157 回答
0

对于你的#1 问题，试试这个。

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