如何在表单中选择单选按钮时显示和隐藏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

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

 $('[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

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