Javascript打开和隐藏单选

Question

一个小问题，除了我之外，任何人都可以解决，只要不知道JS。我在点击付款方式后，根据付款的频率打开各种div。我还打开了一个带有文本输入的div。问题是，使用的JS适用于所有东西。因此，如果通过输入(无线电)解压div，另一个独立的输入(无线电)将关闭它。此外，如果我通过输入解压带有其他单选输入的div，单击任何div都会再次关闭该div。

这里是fiddle - jsfiddle.net/72jzy8gb

​

$(document).ready(function() { 
                $('input[type="radio"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    var targetBox = $("." + inputValue); 
                    $(".ukaz").not(targetBox).hide(); 
                    $(targetBox).show(); 
                }); 
            }); 

.ukaz {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-daruj" action="https://www.darujme.cz/darovat/1320" id="myForm" method="get">
<table class="daruj-form">
<tr>
<td colspan="2" style="text-align:center;font-size:25px;">
<b style="color:#dd4814;">Částka dobrovolného příspěvku</b><br />
</td>
</tr>
<tr>
<td style="text-align:-webkit-right;"><div style="width:147px;" id="castka">
<input name="amount" type="number" style="width: 100px;" value="100"> <span style="display:inline;">Kč</span></div><br /><input name="currency" type="hidden" value="CZK">
<input name="locale" type="hidden" value="cs"></td>

<td style="vertical-align:top;text-align:-webkit-left;"><div class="castky" style="
    margin-top: 6px;"><input type="radio" name="frequency" value="once"><div id="jednorazove" style="font-size:13px;color:black;font-weight:bold;display: inline;padding-left: 5px;vertical-align: super;">Jednorázově</div><br>
<input type="radio" name="frequency" value="monthly"> <div id="mesicne" style="padding-left:2px;font-size:13px;color:black;font-weight:bold;display: inline;vertical-align: super;"> Měsíčně</div></div></td>
</tr>
<tr>
<td style="width:50%;">  
<input name="firstName" type="text" placeholder="Jméno"><br> 
<input name="lastName" type="text" placeholder="Příjmení"><br> 
<input name="email" type="email" placeholder="Váš email"><br>   
<input name="phone" type="number" placeholder="Telefonní číslo"><br>  
<br>
<b>Požadujete potvrzení o daru?</b><br>
<input type="radio" name="wantDonationCertificate" value="1" nazev="adresa"> Ano<br>
<input type="radio" name="wantDonationCertificate" value="0" checked=""> Ne<br>
</td>
<td><div class="1 ukaz">
<input name="street" type="text" placeholder="Ulice a číslo popisné"><br>
<input name="city" type="text" placeholder="Obec/město"><br>
<input name="postcode" type="text" placeholder="PSČ"><br>
</div>

<br>

<div class="once ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem<br>
<input type="radio" name="paymentMethod" value="payu_transfer"> Online platba PayU
</div>


<div class="monthly ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem
</div>
<b>Chcete zasílat aktuality na email?</b><br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="1" checked=""> Ano<br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="0"> Ne<br>

<input type="submit" value="Odeslat"> 
</td>
</tr>
</table>
</form>

​

这是不受欢迎的行为。感谢您的帮助！

Answer 1

您应该使用指向特定元素而不是一组元素的指示器。

我在这里使用了input的name，而不是type：

$(document).ready(function() {
 $('input[name="wantDonationCertificate"]').click(function() {
  var inputValue = $(this).attr("value");
  var targetBox = $("." + inputValue);
  $(".ukaz").not(targetBox).hide();
  $(targetBox).show();
 });
});