Question

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

HTML：

＆＃13;

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

＆＃13;

三个单选按钮选项的id等于＆＃34; majorreq＆＃34;。如果是＆＃34; Class credit＆＃34;的单选按钮如果选中它，则应显示带有div＃＆＃34; classnametoggle＆＃34;的字段的字段。和＆＃34; classhourstoggle＆＃34;。它应该在页面最初加载时隐藏这些字段。

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

Answer 1

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

<强>解释 - 单击单选按钮（类别信用）时，应显示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内容之间的关系。单击单选按钮时，它会隐藏所有表单，仅显示相关表单。

您只需要在单选按钮和相关表单周围的包装器上添加数据属性（比如我）或类。

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

2 个答案: