以这种方式单击单选按钮时如何动态显示表单字段

Question

对于表单上的问题，我有三个单选按钮选项。我想用 jquery 来实现这个效果：根据单击的单选按钮，我想显示其关联的表单字段，这些字段是该单选按钮选择所必需的。

HTML：

<div class="ss-form-question errorbox-good" role="listitem">
  <div dir="ltr" class="ss-item ss-item-required ss-radio">
    <div class="ss-form-entry">
      <label class="ss-q-item-label" for="entry_594986466">
        <div class="ss-q-title">Are you doing this for major requirements or class credit?
          <label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
          <span class="ss-required-asterisk" aria-hidden="true">*</span>
        </div>
        <div class="ss-q-help ss-secondary-text" dir="ltr"></div>
      </label>
      <ul class="ss-choices" role="radiogroup" aria-label="Are you doing this for major requirements or class credit?  ">
        <li class="ss-choice-item">
          <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Major requirements" id="group_817382212_1" role="radio" class="ss-q-radio" aria-label="Major requirements" required="" aria-required="true"></span>
            <span class="ss-choice-label">Major requirements</span>
          </label>
        </li>
        <li class="ss-choice-item">
          <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Class credit" id="group_817382212_2" role="radio" class="ss-q-radio" aria-label="Class credit" required="" aria-required="true"></span>
            <span class="ss-choice-label">Class credit</span>
          </label>
        </li>
        <li class="ss-choice-item">
          <label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="neither, just want to help out!" id="group_817382212_3" role="radio" class="ss-q-radio" aria-label="neither, just want to help out!" required="" aria-required="true"></span>
            <span class="ss-choice-label">neither, just want to help out!</span>
          </label>
        </li>
      </ul>

      <div id="majorreq_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
    </div>
  </div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classnametoggle">
  <div dir="ltr" class="ss-item  ss-text">
    <div class="ss-form-entry">
      <label class="ss-q-item-label" for="entry_2016813698">
        <div class="ss-q-title">If for class credit, which class is it for?</div>
        <div class="ss-q-help ss-secondary-text" dir="ltr">ex HDFS 395C</div>
      </label>
      <input type="text" name="whichclass" value="" class="ss-q-short" id="whichclass_input" dir="auto" aria-label="If for class credit, what class is it for? ex HDFS 395C Must contain " pattern=".*.*" title="Must contain ">

      <div id="whichclass_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
    </div>
  </div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classhourstoggle">
  <div dir="ltr" class="ss-item  ss-text">
    <div class="ss-form-entry">
      <label class="ss-q-item-label" for="entry_1438442595">
        <div class="ss-q-title">And how many hours are required?</div>
        <div class="ss-q-help ss-secondary-text" dir="ltr">enter only numbers</div>
      </label>
      <input type="number" name="classhours" value="" class="ss-q-short" id="classhours_input" dir="auto" aria-label="How many hours are required for you to complete? State it in numbers Must be a number greater than 0" step="any" title="Must be a number greater than 0">
      <div id="classhours_valid" style="display:none;color:rgb(196,59,29);">Please enter a number</div>
      <div id="classhours_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
    </div>
  </div>
</div>

三个单选按钮选项的 id 等于“majorreq”。如果选择了“Class credit”的单选按钮，那么它应该显示 div id 为“classnametoggle”和“classhourstoggle”的字段。它应该在页面最初加载时隐藏这些字段。

我该怎么做？我在谷歌上进行了广泛的搜索，但我很困惑，因为我只是 javascript 编程的初学者。任何帮助将不胜感激。

Answer 1

我想这就是你想要的，试着把它放到你的 js 部分脚本中，希望这会有所帮助。

说明 - 当单选按钮(Class credit)被点击时，id为classnameotggle和classhourstoggle的div应该会出现，对吧？

 <script>
 $(document).ready(function(){
    $('#classhourstoggle, #classnametoggle').hide();

    $('input[type=radio]').on('click', function(){
       var radio_value = $(this).val();

         if(radio_value=="Class credit")
         {
             $('#classhourstoggle, #classnametoggle').show();
         }
         else
         {
             $('#classhourstoggle, #classnametoggle').hide();
         }
    });
 }); 
 </script>  

Answer 2

试试这样的：

$(".radio").on("click", function() {
  var target = $(this).data("target");
  $(".form-group").hide().filter("[data-target=" + target + "]").show();
});

.form-group {
  display: none;
}

<form>
  <input type="radio" class="radio" data-target="form1" />
  <input type="radio" class="radio" data-target="form2" />
  <input type="radio" class="radio" data-target="form3" />

  <div class="form-group" data-target="form1">

  </div>
  <div class="form-group" data-target="form2">

  </div>
  <div class="form-group" data-target="form3">

  </div>
</form>

基本上，您所做的是使用 data 属性来管理单选按钮和 DOM 内容之间的关系。当您单击单选按钮时，它会隐藏所有表单，只显示相关的。

您只需要在您的单选按钮上添加数据属性（就像我一样）或类，并在其相关表单周围添加包装器。