javascript - 在表单中选择单选按钮时如何显示和隐藏div？

Question

我的表单结构如下:

<div id="q1">
  Question? <br>
  <input type="radio" name="novecislo" value="Ano1" id="f4"> Yes <br>
  <input type="radio" name="novecislo" value="Ne1" id="q2"> No
</div>
<div id="q2" class="none">
  Question? <br>
  <input type="radio" name="operator" value="tmo"> T-mobile <br>
  <input type="radio" name="operator" value="o2"> O2 <br>
  <input type="radio" name="operator" value="vodafone"> Vodafone <br>
</div>
<div id="f4" class="none">
  Question? <br>
  <input type="radio" name="tarif" value="tarif1"> Tarif 1 <br>
  <input type="radio" name="tarif" value="tarif2"> Tarif 2 <br>
  <input type="radio" name="tarif" value="tarif3"> Tarif 3 <br> Question? <br>
  <input type="checkbox" name="akt" value="roaming"> Roaming <br>
  <input type="checkbox" name="akt" value="pay"> Payments <br>
</div>

想法是，选择 ID 为“f4”的单选按钮后，将显示一个 div“f4”，依此类推。

在div“q2”中我需要相同的，选择单选按钮后我需要显示其他div。

是否也可以通过选择一个单选按钮来显示 2 个或更多 div？如果是这样，怎么办？

Answer 1

您可以使用jquery来获取您想要的内容，并使用自定义属性来定义目标div

$(document).ready(function() {
  $('[data-target]').click(function() {
    $('.none').hide();
    if ($(this).is(':checked')) {
      var target = $(this).attr('data-target');
      $(target).show();
    }
  });
});

.none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="q1">
  Question? <br>
  <input type="radio" name="novecislo" value="Ano1" data-target="#f4,#f5"> Yes <br>
  <input type="radio" name="novecislo" value="Ne1" data-target="q2"> No
</div>
<div id="q2" class="none">
  Question? <br>
  <input type="radio" name="operator" value="tmo"> T-mobile <br>
  <input type="radio" name="operator" value="o2"> O2 <br>
  <input type="radio" name="operator" value="vodafone"> Vodafone <br>
</div>
<div id="f4" class="none">
  Question? <br>
  <input type="radio" name="tarif" value="tarif1"> Tarif 1 <br>
  <input type="radio" name="tarif" value="tarif2"> Tarif 2 <br>
  <input type="radio" name="tarif" value="tarif3"> Tarif 3 <br> Question? <br>
  <input type="checkbox" name="akt" value="roaming"> Roaming <br>
  <input type="checkbox" name="akt" value="pay"> Payments <br>
</div>

<div id="f5" class="none">
  Question? <br>
Seconde div
</div>