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

Question

我有这样的表单结构：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

想法是选择带有ID＆＃34; f4＆＃34;的单选按钮后一个div＆＃34; f4＆＃34;会出现等等。

在div＆＃34; q2＆＃34;我需要相同的，在选择单选按钮后，我需要显示其他div。

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

Answer 1

将ID属性更改为data-id并在无线电上添加更改事件，例如

$('[data-id]').on('change',function(){
  $('.none').hide();
  $('#'+$(this).attr('data-id')).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-id="f4"> Yes <br>
  <input type="radio" name="novecislo" value="Ne1" data-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>

Answer 2

您可以使用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>

Answer 3

我不确定什么时候应该显示。但是在一个例子下面如何使用CSS实现它。我不得不删除id=q1

＆＃13;

＆＃13;

.f4,
.q2 {
  display: none;
}

#f4:checked~.f4 {
  display: block;
}

#q2:checked~.q2 {
  display: block;
}

＆＃13;

Question? <br>
<input type="radio" name="novecislo" value="Ano1" id="f4"> Yes <br>
<input type="radio" name="novecislo" value="Ne1" id="q2" checked> No

<div class="q2">
  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 class="f4">
  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>

＆＃13;

＆＃13;

＆＃13;