Question

多数情况下有效。当选择第一个Val单选按钮时，它将显示SSN。当第二个Val单选按钮被选中时，它也会显示PaperAppliction。唯一的问题是，在选中任何单选按钮之前，何时加载表单时，PaperApplication字段会显示。我需要它同时隐藏SSN和PaperApplicaition，直到选中单选按钮之一，然后显示正确的字段。我想念什么？

这是JS

    $(".field.SocialSecurity input[type=radio]").on("change", function() {
      if (
        $(this).val() ==
        "As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
      ) {
        $(".field.SSN").show();
        $(".field.SSN input").focus();
        $(".field.PaperApplication").hide();
      } else if (
        $(this).val() ==
        "Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
      ) {
        $(".field.PaperApplication").show();
        $(".field.PaperApplication input").focus();
        $("field.SSN").hide();
      } else {
        $("field.PaperApplication").hide();
      }
    });

这是html格式美国公民国际学生其他

  <div class="field SSN">
    <label>SSN</label>
    <input />
  </div>

  <div class="field PaperApplication">
    <label>Paper Application</label>
    <input />
  </div>

Answer 1

您可以使用HTML标记在开始时将其设置为隐藏，以向元素添加样式属性。 style="display:none"应该这样做。

例如<div class="field SSN" style="display:none;">，另一个则相同。

Answer 2

在调用脚本时将它们隐藏，并且在触发change事件时也将其隐藏在if语句之外。另外，将您的单选按钮值设置为一两个单词，驼峰式。将描述按钮的字符串放在标签标签中：

$(".SSN, .PaperApplication").hide();

$(".field.SocialSecurity input[type=radio]").on("change", function() {
  $(".SSN, .PaperApplication").hide();
  if ($(this).val() == "first") {
    $(".field.SSN").show();
    $(".field.SSN input").focus();
  } else if ($(this).val() == "second") {
    $(".field.PaperApplication").show();
    $(".field.PaperApplication input").focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
  <label>
 Radio 1 text here
    <input type="radio" name="radio" value="first" /> 
    </label><br>
  <label>
Radio 2 text here
    <input type="radio" name="radio" value="second" />
    </label>
</div>

<div class="field SSN">
  <label>SSN</label>
  <input />
</div>

<div class="field PaperApplication">
  <label>Paper Application</label>
  <input />
</div>

Answer 3

隐藏加载的内容，然后单击隐藏两者，并显示被单击的内容。在摘要下方运行

$("input[name='socialsecurity']").click(() => {
   $('.field').hide();
  $(`.${$("input[name='socialsecurity']:checked").val()}`).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="socialsecurity" value="SSN"> SSN<br>
<input type="radio" name="socialsecurity" value="PaperApplication"> Paper Application<br>

 
 <div class="field SSN" style = 'display: none;'>
    <label>SSN</label>
    <input />
  </div>

  <div class="field PaperApplication" style = 'display: none;'>
    <label>Paper Application</label>
    <input />
  </div>

表单栏位显示

3 个答案: