条件表单输入 - 显示/隐藏多个字段

Question

我正在尝试构建一个隐藏表单的多个输入框的表单，除非满足某个条件。
所以问题是： 您有单独的邮寄地址吗？ 是的 没有

如果选择“是”，我想显示三个输入字段，分别是他们的邮寄地址、城市和邮政编码。 如果“不”，那么我不想出现任何东西。我只是希望他们能够进入下一行。

到目前为止，我从研究中得出的结论只有在我使用简单的单个输入框进行回复时才有效。当我尝试在他们自己的 div 中进行多个输入时，它会破坏表单。

 <div class="form-item">
                    <label>
                    <input type="radio" id="yes" name="yesOrNo" value="yes" onchange="displayQuestion(this.value)" />Yes</label>
                    <label>
                    <input type="radio" id="no" name="yesOrNo" value="no" onchange="displayQuestion(this.value)" />No</label>
            
                    <div id="yesQuestion" style="display:none;"><br/>
                        <div class="form-item">
                            <label for="Mailing Address" class="req-field">Mailing Address</label>
                            <input id="Mailing_Address" name="Mailing Address" type="text" class="required-text" autocomplete="mailing-address"/>
                        </div>
                        <div class="form-item">
                            <label for="Mailing_City" class="req-field">City</label>
                            <input id="mailing_city" name="mailing_city" type="text" class="required-text" autocomplete="street-city"/>
                        </div>
                        <div class="form-item">
                            <label for="mailing_zip" class="req-field">Zip Code</label>
                            <input id="mailing_zip" name="mailing_Zip" type="text" class="required-text" autocomplete="street-zip"/>
                        </div>
                    </div>
                </div>

    function displayQuestion(answer) {

        document.getElementById('noQuestion').style.display = "none";

        if (answer == "yes") {    

        document.getElementById(answer + 'Question').style.display = "block";

        } else if (answer == "no") {  document.getElementById('yesQuestion').style.display = "none";

}

}

谢谢。

Answer 1

我这里有很多cmet，希望能帮到你：

1. <fieldset> 可以在表单中用于处理一组表单字段。如果它具有disabled 属性，则所有子表单字段都将被禁用。
2. 在您的情况下，单选按钮的值可以是 0 和 1。这些值可以转换为布尔值。
3. <input> 中的属性可以有任何值，但尽量遵守标准：autocomplete #values。
4. 尽量在表单中使用name 属性并使用更少的ID——ID 在HTML 文档中需要是唯一的。
5. 在您的情况下，不要使用像“required-text”这样的类名来设置必填字段的样式，而是使用required 属性和相应的样式。

JavaScript 侦听整个表单上的更改事件（因此，这可能是任何表单字段上的任何更改）。我测试e.target.name 是否为“yesOrNo”——然后我知道单选按钮发生了变化。现在我可以从“radioNodeList”中获取布尔值并将其分配给字段集的disabled 属性。

document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.addEventListener('change', e => {
    if (e.target.name == 'yesOrNo') {
      let yesOrNo = new Boolean(parseInt(e.target.form.yesOrNo.value));
      e.target.form.yesQuestion.disabled = yesOrNo.valueOf();
    }
  });
});

input:required {
  border: red thin solid;
}

input:disabled {
  border: darkgray thin solid;
  background-color: lightgray;
}

fieldset:disabled {
  display: none;
}

<form name="form01">
  <div class="form-item">
    <label><input type="radio" name="yesOrNo" value="0"/>Yes</label>
    <label><input type="radio" name="yesOrNo" value="1" checked/>No</label>
  </div>
  <fieldset name="yesQuestion" disabled>
    <div class="form-item">
      <label for="mailing_address" class="req-field">Mailing Address</label>
      <input id="mailing_address" name="mailing_address" type="text"
        autocomplete="street-address" required/>
    </div>
    <div class="form-item">
      <label for="mailing_city" class="req-field">City</label>
      <input id="mailing_city" name="mailing_city" type="text"
        autocomplete="address-level2" required/>
    </div>
    <div class="form-item">
      <label for="mailing_zip" class="req-field">Zip Code</label>
      <input id="mailing_zip" name="mailing_zip" type="text"
        autocomplete="postal-code" required/>
    </div>
  </fieldset>
</form>