在单选按钮单击时获取带有文本字段的文本框答案

【问题标题】：Get text box with textfields on radio button click在单选按钮单击时获取带有文本字段的文本框
【发布时间】：2013-11-10 07:29:25
【问题描述】：

我正在编写一个带有一些单选按钮的页面，但遇到了一些问题。这是我的电流输出

下面是我的代码

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

我的实际预期输出是。

当我点击唯一单选按钮时，会出现一个文本框并自动下一步单选按钮（可变）将隐藏
文本框包括..其中的四个文本字段..两个字段用于 FROM 和日期选择器和内容占位符，最后一个按钮添加相同的 4 同一文本框中下一行的字段

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

【问题讨论】：

HTML 部分在哪里？
@SunilKumar：对不起，我重新编辑我的代码..检查一下
对于#2 你的意思是unique 单选按钮附近的textbox 应该具有 FROM TO 的值
id必须是唯一的，<input type="text" name="site" id="sitehtn" />和<input type="text" name="textfield3" id="sitehtn" />有相同的id，你可以改变id或者使用class来代替。使用$('.sitehtn').hide(); 课程。
@AlexBall：谢谢我纠正它..但是当我选择第一个单选按钮时如何隐藏下一个单选按钮

标签： javascript jquery html radio-button

【解决方案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>

【讨论】：

【解决方案2】：

对于您的第一个问题，试试这个。

$('#courtierRadio').on('change', function () {
   $('#sitehtn').show();
   $('#agenceRadio').hide();
});

【讨论】：

感谢您的代码它可以工作，但我还有一个问题，但我在下面的代码中做了哪些更改，以显示我的第一个单选按钮旁边的所有文本字段，现在它只显示一个文本框..如果我添加更多它没有显示
$('input[type=radio]').change(function() { $('#sitehtn').hide() $(this).parent().next().节目（） }）; //这是ma代码