Mam taką strukturę:

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

Pomysł polega na tym, że po wybraniu przycisku radiowego z ID "F4" A Div "F4" pojawi się i tak dalej.

W Div "Q2" potrzebuję tego samego, po wybraniu przycisków radiowych potrzebuję innego div, aby się pojawić.

Czy można również pokazać 2 lub więcej divs, wybierając jeden przycisk radiowy? Jeśli tak to jak?

1
Tomáš Vítů 28 czerwiec 2017, 12:39

3 odpowiedzi

Najlepsza odpowiedź

Możesz użyć jQuery, aby uzyskać żądaną, i użyj niestandardowego atrybutu, aby zdefiniować ukierunkowanego 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>
0
Chiller 28 czerwiec 2017, 12:32

Nie jestem dokładnie pewien, co powinno być wyświetlane, gdy. Ale poniżej przykładu, w jaki sposób można go osiągnąć za pomocą CSS. Musiałem usunąć id=q1

.f4,
.q2 {
  display: none;
}

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

#q2:checked~.q2 {
  display: block;
}
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>
0
Gerard 28 czerwiec 2017, 09:54

Zmień atrybut ID do data-id i Dodaj zdarzenie Zmień na radio,

$('[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>
0
Rohan Kumar 28 czerwiec 2017, 09:45