时间戳

首页 > 解决方案 > jQuery Radio 选择显示相关字段

jquery - jQuery Radio 选择显示相关字段

问题描述

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

表格如下所示：

<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();
  }
}

所以在这里唯一能正常工作的是从一开始就隐藏在两种形式上。

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

标签： jquery

解决方案

你可以：

  1. 通过 CSS隐藏两个结果div的internal-form和external_url ；

  2. 将 jQueryclick方法应用于input带有type radio和name training_event[registration]的 s以切换结果divs 的可见性。

$(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>

推荐阅读