Javascript 获取单选按钮上有文本字段的文本框单击_Javascript_Jquery_Html_Radio Button

Javascript 获取单选按钮上有文本字段的文本框单击

javascript jquery html

Javascript 获取单选按钮上有文本字段的文本框单击,javascript,jquery,html,radio-button,Javascript,Jquery,Html,Radio Button,我正在用一些单选按钮编写一个页面，遇到了一些问题。这是我的电流输出下面是我的代码 <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-

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

下面是我的代码

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


#斯特恩{
显示：无
}
.集装箱{
宽度：100%；
高度：600px；
背景色：rgb（179174174）；
}
#达特皮克特{
左边距：2米；
}
.eventDateDiv{
高度：150像素；
宽度：30%；
左边距：自动；
右边距：自动；
}
#白天{
保证金顶部：-1.4em；
左缘：30%；
}
.eventShowDiv{
高度：250px；
宽度：30%；
左边距：自动；
右边距：自动；
}
.事件{
颜色：绿色；
边缘顶部：5px；
}
$（函数（）{
$（“#datepickerF”）.datepicker({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
$（“#datepickerT”）.datepicker({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
$（'#getdays'）。单击（函数（）{
var start=$（'#datepickerF'）。datepicker（'getDate'）；
var end=$（'#datepickerT'）。datepicker（'getDate'）；
风险值天数=（结束-开始）/1000/60/60/24；
document.getElementById（“daysBetween”）.innerText=days；
});
$（'input[type=radio]'）。更改（函数（）{
$（'#sitehtn'）.hide（）
$（this.parent（）.next（）.show（））
});
函数显示结果（浏览器）{
document.getElementById（“结果”）.value=browser
}
});
活动日期
发件人：
致：
天数

活动表演时间
节目类型：
独特的


多种多样的

我的实际预期输出是

当我点击Unique单选按钮时，会出现一个文本框，并自动进入下一步单选按钮（可变）将隐藏

文本框中包含..四个文本字段..两个用于“发件人”和“收件人”的字段到日期选择器和内容占位符，最后一个按钮添加相同的4 同一文本框中下一行的字段

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

对于您的#1问题，请尝试这个

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

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

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


#斯特恩{
显示：无
}
.集装箱{
宽度：100%；
高度：600px；
背景色：rgb（179174174）；
}
#达特皮克特{
左边距：2米；
}
.eventDateDiv{
高度：150像素；
宽度：400px；
左边距：0；
右边距：自动；
}
#白天{
保证金顶部：-1.4em；
左缘：30%；
}
.eventShowDiv{
高度：250px；
宽度：30%；
左边距：自动；
右边距：自动；
}
.事件{
颜色：绿色；
边缘顶部：5px；
}
函数加载（）{
$（“.datepickerF”）.datepicker({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
$（“.datepickerT”）.datepicker({
展示：“按钮”，
buttonImage:“calendar.gif”，
buttonImageOnly:true
});
$（'.getdays'）。单击（函数（）{
var start=$（this.prev（）.prev（）.find（'input'）.datepicker（'getDate'）；
var end=$（this.prev（）.find（'input'）.datepicker（'getDate'）；
风险值天数=（结束-开始）/1000/60/60/24；
$（this）.next（）.text（天）；
});
$（'input[id=courtierRadio]'）。更改（函数（）{
$（'#hideRadio'）.html（“”）；
$（'#hideRadio'）.append（getAppleInfo（））；
});
函数显示结果（浏览器）{
document.getElementById（“结果”）.value=browser
}
};
window.onload=加载；
//反模式！继续读。。。
函数getAppleInfo（）{
var eventDateDiv=“”；
eventDateDiv=$（“”）。addClass（“eventDateDiv”）；
eventDateDiv.append（$（“”）text（“FROM:”）.append（$（“”）attr（“class”，“datepickerF”）.attr（“type”，“text”））；
eventDateDiv.append（$（“”）text（“TO:”）.append（$（“”）attr（“class”，“datepickerT”）.attr（“type”，“text”））；
eventDateDiv.append（$（“”）.text（“天数”）.attr（“类”、“getdays”）；
eventDateDiv.append（$（“”）attr（“class”，“daysBetween”）；
eventDateDiv.append（$（“”）text（“添加另一个”）.attr（“href”，“#”）attr（“onclick”，“belowDiv（this）”））；
返回eventDateDiv；
}
功能下位IV（自）{
$（'#hideRadio'）.append（getAppleInfo（））；
加载（）；