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

Question

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

Answer 1

您可以使用此 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/