使用Query根据单选按钮动态添加/删除输入字段

Use Query to Dynamically add/remove input fields depending on radio button

本文关键字：删除 输入 字段 添加 动态 Query 单选按钮 使用      更新时间：2023-09-26

我从CodeCanyon下载了一个表单，我可以很好地编辑表单，但我需要做一个超出我能力范围的更改，任何帮助或指导都将不胜感激。

我需要设置表单，这样当用户从单选按钮中选择"是"时，会弹出一个经过验证的输入，然后当选择"否"时，输入将被删除。

然后在验证时，所有单选按钮问题都必须选择其中一个。

所以表格看起来像：

标签->问题1

无线电->是//｛否｝

标签->问题2

无线电->｛是｝//无

输入->3400

标签->问题3

无线电->｛是｝//无

输入->550

然后表单的电子邮件将发送以下内容：

问题1：没有

问题2:3400

问题3:550

<form method="post" class="DA_custom_form" id="registration-form" action="email.php">
    <h3>Dynamic Radio Section</h3>
    <div class="DA_inner_frame">
        <div class="DA_holder">
            <label>Radio Question 1</label>
            <div class="DA_holder DA_radio_holder">
            <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question1" id="question1" value="yes" /><label class="fl">Yes</label>
                <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question1" id="question1" value="no"  /><label class="fl">No</label>
                <div class="cl">&nbsp;</div>
            </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!--Show on Yes --><div class="DA_holder">
            <label>Text field for question 1: Yes</label>
            <div class="DA_field_container" >
                <div class="cl" >&nbsp;</div>
                <input type="text" class="field" id="question1" name="question1" placeholder='Range Validation 2000-4000'/>
                <span><i class="icon-remove"></i></span>
                <div class="cl">&nbsp;</div>
            </div>  
        </div>
        <div class="DA_holder">
            <label>Radio Question 2</label>
            <div class="DA_holder DA_radio_holder">
            <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question2" id="question2" value="yes" /><label class="fl">Yes</label>
                <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="questio2" id="question2" value="no"  /><label class="fl">No</label>
                <div class="cl">&nbsp;</div>
            </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!--Show on Yes --><div class="DA_holder">
            <label>Text field for question 2: Yes</label>
            <div class="DA_field_container" >
                <div class="cl" >&nbsp;</div>
                <input type="text" class="field" id="question2" name="question2" placeholder='Range Validation 500-1000'/>
                <span><i class="icon-remove"></i></span>
                <div class="cl">&nbsp;</div>
            </div>  
        </div>
        <div class="DA_holder">
            <label>Radio Question 3</label>
            <div class="DA_holder DA_radio_holder">
            <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question3" id="question3" value="yes" /><label class="fl">Yes</label>
                <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="questio3" id="question3" value="no"  /><label class="fl">No</label>
                <div class="cl">&nbsp;</div>
            </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!--Show on Yes --><div class="DA_holder">
            <label>Text field for question 3: Yes</label>
            <div class="DA_field_container" >
                <div class="cl" >&nbsp;</div>
                <input type="text" class="field" id="question3" name="question3" placeholder='Range Validation 500-1000'/>
                <span><i class="icon-remove"></i></span>
                <div class="cl">&nbsp;</div>
            </div>  
        </div>
</form>

您可以使用以下jQuery:切换问题后的输入字段

$(".DA_radio_holder .radio-btn").change(function() {
    // get appropriate level parent and toggle the next one at that level
    // based on the value of the radio
    $(this).closest(".DA_radio_holder").parent().next()
       .toggle(this.value === 'yes');
});

如果将问题父div和文本字段父div分别赋予它们自己的唯一类，则可以使代码更简单、更易于维护。然后，您还可以通过CSS设置文本字段的可见性默认值。

例如，通过将类"question"添加到问题父项，将类"textField"添加到文本字段父项，如下所示：

        <div class="DA_holder question">
            <label>Radio Question 1</label>
            <div class="DA_holder DA_radio_holder">
            <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question1" id="question1" value="yes" /><label class="fl">Yes</label>
                <div class="cl">&nbsp;</div>
                <input type="radio" class="radio-btn" name="question1" id="question1" value="no"  /><label class="fl">No</label>
                <div class="cl">&nbsp;</div>
            </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!--Show on Yes --><div class="DA_holder textField">
            <label>Text field for question 1: Yes</label>
            <div class="DA_field_container" >
                <div class="cl" >&nbsp;</div>
                <input type="text" class="field" id="question1" name="question1" placeholder='Range Validation 2000-4000'/>
                <span><i class="icon-remove"></i></span>
                <div class="cl">&nbsp;</div>
            </div>  
        </div>

然后，代码变成这样：

$(document).ready(function() {
    $(".DA_radio_holder .radio-btn").change(function() {
        // get appropriate level parent and toggle the next one at that level
        // based on the value of the radio
        $(this).closest(".question").next().toggle(this.value === 'yes');
    });
});

而且，您可以从隐藏所有文本字段的CSS:开始

.DA_holder.textField {display: none;}

第二个选项的工作演示：http://jsfiddle.net/jfriend00/vjbb4t9p/

相关文章：