Le bouton d'activation/désactivation du bouton radio ne fonctionne que d'un seul côté

Question

C'est donc la chose la plus stupide avec laquelle je me suis battu depuis un moment. Je ne peux pas obtenir l'état d'un simple bouton radio pour basculer quelque chose sur la page.

<label for="completeSw"><span>Completed?</span></label> 
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes 
<input type="radio" id="completeSw" name="completeSw" value="0" checked="checked"/>No<br/> 

Vous pouvez donc voir ici un bouton radio oui/non extrêmement simple pour basculer une action. Il doit servir à deux fins: marquer une valeur yes/no (1/0) dans les données POST et, idéalement, déclencher une action sur la page en utilisant JS/jQuery. J'ai des problèmes avec ce dernier.

L'état par défaut est "Non"; Si je clique sur "Oui", je peux récupérer un état d'événement onchange ou onclick et faire quelque chose. Cependant, ceci est un commutateur à sens unique; Je ne peux pas récupérer un état retournant au sélecteur "Non" une fois que je suis passé à "Oui". Ce que je dois être capable de faire est d'afficher/cacher un élément sur la page en fonction du choix qu'ils ont fait dans ce poste de radio. Si je clique sur "Oui", je peux déclencher l'action et voir la page changer. Cependant, une fois que je clique sur "Non", il agit comme s'il n'y avait pas de changement d'état et je ne peux pas effectuer une action, c'est-à-dire masquer à nouveau l'élément.

J'ai essayé des variantes pour récupérer l'état "vérifié", la valeur de la paire radio, etc., par ex. Peut-être que je ne devrais pas utiliser une paire radio oui/non, mais utiliser plutôt une seule case à cocher? Semble plus convivial et élégant de cette façon (boutons radio) pour moi.

Answer 1

ID doit être unique, il ne trouvera que jamais le premier sur votre page. Utilisez une classe à la place.

Answer 2

Certains navigateurs ne font rien lorsqu'ils sont alertés (message), message = null. Et comme un champ non coché n'a pas d'attribut checked, cela pourrait être la chose :).

Essayez:

alert('Checked: '+$(this).attr("checked")); 

Answer 3

Vraiment, les ID doivent être uniques, mais vous n'avez pas besoin de 2 ID. Vous ne surveillerez que les changements dans une radio. Par exemple - valeur « Oui »

<label for="completeSw"><span>Completed?</span></label> 
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes 
<input type="radio" name="completeSw" value="0" checked="checked"/>No<br/> 

Et vous traitez l'attribut checked de seulement cet élément. Vrai - "Oui", Faux - "Non"

Answer 4

Ceci est séparé, mais vous utilisez un peu l'étiquette incorrecte également. L'étiquette est destinée à étendre la zone de clic afin que quelqu'un puisse cliquer sur le mot «Oui» et le bouton radio sera activé. J'espère que cela vous aide un peu.

<span>Completed?</span> 
<input type="radio" id="completeSwYes" name="completeSw" value="1"/><label for="completeSwYes">Yes</label> 
<input type="radio" id="completeSwNo" name="completeSw" value="0" checked="checked"/><label for="completeSwNo">No</label><br/> 

<script type="text/javascript" charset="utf-8"> 
    // If the radio button value is one then this evaluates to true. 
    var completeSW; 
    jQuery("input[type='radio'][name='completeSw']").change(function() { 
     completeSW = (jQuery(this).val() == 1); 
     alert("completeSW checked? " + completeSW); 
    }); 
</script>