Question

所以我有一个非常基本的形式，我使用单选按钮来确定需要显示的字段。如果选择一个，则显示按类别关联的字段列表。如果选择了另一个，则应显示这些字段，而其他则应隐藏（这是我有点绊脚的地方）。

表单如下：

<div class="col-sm-10">
 <input type="radio" value="Internal Form" name="training_event[registration]" id="training_event_registration_internal_form">
 <label for="training_event_registration_true">Internal Form</label>
 <div class="row">
    <div class="col-sm-10">
     <input type="radio" value="External URL" name="training_event[registration]" id="training_event_registration_external_url">
     <label for="training_event_registration_false">External URL</label>
   </div>
 </div>
</div>

其他字段包含在以下内容中：

<div class="internal-form">
</div>
<div class="external_url">
</div>

我认为我可以做类似的事情：

$(document).ready(function () {
 $('.internal-form).hide();
 $('.external_url').hide();
 $('#training_event_registration_internal_form').click(function (){
  if ($(this).is(":checked")) {
   $('.internal-form').show();
  } else {
   $('.internal-form').empty();
   $('.internal-form').css("display", "none");
   $('.external_url').show();
  }
}

因此，这里唯一有效的方法是从一开始就隐藏两种形式的皮革。

那么如何在选择一个字段时显示关联的字段，然后在选择另一个字段时切换呢？

Answer 1

您的逻辑中存在一些问题：

您错过了$('.internal-form)上的结束语
$(this).is(":checked")始终是true，就像您刚刚单击收音机选择它一样。您需要改为检查元素的val()。
在CSS中隐藏.internal-form和.external_url而不是JS，以避免FOUC。
在处理复选框和单选输入而不是change时使用click事件。这是出于可访问性的原因。

另外，您确定要在其中打电话empty()吗？它擦除了元素的内容，但是您永远不会替换它。在下面的示例中，我删除了它，因为它似乎引起了问题而不是解决了一个问题。

$(document).ready(function() {
  $('.trigger').change(function() {  
    if ($(this).val() == 'Internal Form') {
      $('.internal-form').show();
      $('.external_url').hide();
    } else {
      $('.internal-form').hide();
      $('.external_url').show();
    }
  })
});

.internal-form, .external_url {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-10">
  <label>
    <input type="radio" value="Internal Form" name="training_event[registration]" class="trigger">
    Internal Form
  </label>
  <div class="row">
    <div class="col-sm-10">
      <label>
        <input type="radio" value="External URL" name="training_event[registration]" class="trigger">
        External URL
      </label>
    </div>
  </div>
</div>
<div class="internal-form">
  INTERNAL FORM
</div>
<div class="external_url">
  EXTERNAL URL
</div>

请注意，label元素现在包装了每个单选输入，因此for和id属性不再需要，可以删除。

Answer 2

您可以：

通过CSS隐藏两个结果div的内部格式和 external_url ；
将jQuery click方法应用于input radio 和type training_event [registration]的name s 来切换生成的div的可见性。

$(function() {
  $('input:radio[name="training_event[registration]"]').click(function() {
    if ($(this).val() == 'Internal Form') {
      $('.internal-form').show();
      $('.external_url').hide();
    } else {
      $('.internal-form').hide();
      $('.external_url').show();
    }
  });
});

.internal-form, .external_url {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-10">
  <input type="radio" value="Internal Form" name="training_event[registration]" id="training_event_registration_internal_form">
  <label for="training_event_registration_true">Internal Form</label>
  <div class="row">
    <div class="col-sm-10">
      <input type="radio" value="External URL" name="training_event[registration]" id="training_event_registration_external_url">
      <label for="training_event_registration_false">External URL</label>
    </div>
  </div>
</div>
<div class="internal-form">.internal-form</div>
<div class="external_url">.external-url</div>

jQuery Radio选择显示关联字段

2 个答案: