Mostra casella se pulsante di opzione selezionata utilizzando jQuery
Domanda
Ho il seguente codice:
<fieldset>
<legend>Do you currently have SolidWorks</legend>
<ul>
<li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li>
<li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li>
</ul>
</fieldset>
<fieldset id="boxReseller" style="display:none;">
<legend>Who is your SolidWorks reseller?</legend>
<ul>
<li><label for=""><input type="radio" name="reseller" value="Cad Connect" /> Cad Connect</label></li>
<li><label for=""><input type="radio" name="reseller" value="Cadtek" /> Cadtek</label></li>
<li><label for=""><input type="radio" name="reseller" value="CCSL" /> CCSL</label></li>
<li><label for=""><input type="radio" name="reseller" value="Innova" /> Innova</label></li>
<li><label for=""><input type="radio" name="reseller" value="NT CAD/CAM" /> NT CAD/CAM</label></li>
<li><label for=""><input type="radio" name="reseller" value="Solid Engineer" /> Solid Engineer</label></li>
<li><label for=""><input type="radio" name="reseller" value="Solid Solutions Ireland" /> Solid Solutions Ireland</label></li>
<li><label for=""><input type="radio" name="reseller" value="Solid Solutions Management" /> Solid Solutions Management</label></li>
<li><label for=""><input type="radio" name="reseller" value="TMS Scotland" /> TMS Scotland</label></li>
</ul>
</fieldset>
Quello che voglio fare è nascondere il secondo fieldset di default e se una persona sceglie Sì quindi apparirà la casella, e se scelgono No o Sì non è selezionata, allora la casella nasconderà di nuovo.
chiunque aiutareCan? Grazie.
Soluzione
Ref Nick Craver - Nizza soluzione anche se è più felxaible come di seguito
$("input[name='solidworks']").change(function() {
$("#boxReseller").toggle();
});
$("input[name='solidworks']:checked").change(); //trigger correct state onload
Lasciando la leva come wild card (undefined a seconda di quale terminologia si preferisce) ho trovato che ha funzionato in modo più efficiente. Bello però, grazie :)
Altri suggerimenti
Si potrebbe fare questo:
$("input[name='solidworks']").change(function() {
$("#boxReseller").toggle(this.value == "Yes");
});
$("input[name='solidworks']:checked").change(); //trigger correct state onload
È possibile fare un tentativo con il markup nella domanda qui , e provare il pre-controllato "Sì" la versione qui .
Demo
jQuery(function(){
jQuery("input[name=solidworks]").change(function(){
if ($(this).val() == "Yes") {
jQuery("#boxReseller").slideDown()
}
else {
jQuery("#boxReseller").slideUp();
}
});
});
$(document).ready(function() {
$("input[name=solidworks]").change(function() {
if ($this).val() == "Yes") {
$("#boxReseller").slideDown('fast');
}
else {
$("#boxReseller").hide('fast');
}
})
})
somthing come (Scusate se ci sono errori di battitura, il mio caffè non è ancora fatto).
<fieldset id="fs">
<legend>Do you currently have SolidWorks</legend>
<ul>
<li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li>
<li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li>
</ul>
</fieldset>
Ci sono modi di fare questo aspetto migliore, ma il mio caffè non è fatta. redigerà una volta che ottengo il mio elisir.
<script>attr('checked','checked')
$("#fs:checkbox").click(function(){
if($("#rdYes:checked").attr('checked','checked'))
{
$("#boxReseller").css('display', 'block'); })
}
});
</script>