Aide javascript pour cacher les boutons radio

Question

J'ai reçu ce code ici récemment

<script type='text/javascript'> 
$('#discountselection').hide(); 

    $('#No').click(function(){ 
     $('#discountselection').hide(); 
    }); 

    $('#Yes').click(function(){ 
     $('#discountselection').show(); 
    }); 
</script> 

Le but étant de masquer une liste déroulante selon que les boutons radio oui et non ont été sélectionnés. Voici mon code:

<td width="338">Would You like to avail of our multiyear discounts?* 
    <br />See <a href="Pricing">Pricing</a> for more details 
</td> 
<td colspan="4"> 
    <input name="discount" type="radio" id="Yes" value="Yes" />Yes 
    <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br /> 
    <select class="purple" name="discountselection" id="discountselection"> 
     <option value="1" selected="selected">1 Year</option> 
     <option value="2">2 Years</option> 
     <option value="3">3 Years</option> 
     </select>     
</td> 

Je le javascript placé entre les balises de tête, mais pour une raison quelconque cela juste ne fonctionne pas pour moi. Je ne connais pas du tout javascript. Si quelqu'un pouvait voir où je me trompe, cela serait d'une grande aide. Merci.

Answer 1

votre code va bien, vous avez juste besoin de l'emballer avec le gestionnaire prêt.

comme celui-ci,

$(function() { 
    $('#discountselection').hide(); 

    $('#No').click(function() { 
     $('#discountselection').hide(); 
    }); 

    $('#Yes').click(function() { 
     $('#discountselection').show(); 
    }); 
});​ 

vous pouvez également réduire vos codes comme celui-ci,

$(function() { 
    $('#discountselection').hide(); 
    $('#Yes, #No').click(function() { 
     $('#discountselection').toggle(this.value==='Yes'); 
    }); 
});​ 

Answer 2

Le code fonctionne très bien pour moi.

Si cela ne fonctionne pas pour vous, essayez quelques choses:

• assurez-vous que jQuery est inclus correctement et travaille
• mettre partout votre code de gestion des événements après le balisage avec ces éléments

Answer 3

Si vous n'avez pas besoin jQuery, voici une façon de le faire

<script type="text/javascript"> 
function showDiscount(show) { 
    document.getElementById('discountselection').style.display=(show)?'block':'none'; 
} 
window.onload=function() { 
    showDiscount(document.getElementById('discountYes').checked); 
} 
</script> 
<table> 
<tr> 
<td width="338">Would You like to avail of our multiyear discounts?* 
    <br />See <a href="Pricing">Pricing</a> for more details 
</td> 
<td colspan="4"> 
    <input name="discount" type="radio" id="discountYes" value="Yes" onclick="showDiscount(this.checked)"/>Yes 
    <input name="discount" type="radio" id="discountNo" value="No" checked="checked" onclick="showDiscount(!this.checked)"/>No<br /> 
    <select class="purple" name="discountselection" id="discountselection" style="display:none"> 
     <option value="1" selected="selected">1 Year</option> 
     <option value="2">2 Years</option> 
     <option value="3">3 Years</option> 
     </select>     
</td> 
</tr> 
</table> 

Answer 4

La syntaxe $() que vous utilisez est la syntaxe jQuery, pas Javascript simple. JQuery est une bibliothèque Javascript qui ajoute des fonctionnalités supplémentaires par rapport à JS normal. Si vous utilisez cette syntaxe, vous devez inclure la bibliothèque JQuery. Ce que vous essayez d'accomplir est relativement simple, même sans JQuery, mais le code sera complètement différent si vous ne prévoyez pas d'utiliser JQuery.

Si vous envisagez d'utiliser JQuery, votre code doit être encapsulé dans un bloc docuemnt ready, afin qu'il soit initialisé correctement.