Question

我从CodeCanyon下载了一个表单，我可以像我想的那样编辑表单，但是我需要做出一些改变，这超出了我的能力，任何帮助或方向都会非常感激。

我需要设置表单，以便当用户从单选按钮中选择“是”时，弹出经过验证的输入，然后当选择“否”时，将删除输入。

然后在验证时，必须选择所有单选按钮问题。

因此表单看起来像：

标签 - ＆gt;问题1

广播 - ＆gt;是// {否}

标签 - ＆gt;问题2

广播 - ＆gt; {是} //否

输入 - ＆gt; 3400

标签 - ＆gt;问题3

广播 - ＆gt; {是} //否

输入 - ＆gt; 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');
});

如果您提出问题parent div而文本字段parent div各自拥有自己的唯一类，则可以使代码更简单，更易于维护。然后，您还可以通过CSS为文本字段设置可见性默认值。

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

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

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

1 个答案: