Le gestionnaire d'événements OnChange pour le bouton radio (INPUT type = "radio") ne fonctionne pas comme une valeur

Question

Je suis à la recherche d'une solution généralisée pour cela.

Considérons 2 radio de type entrées avec le même nom. Lors de la soumission, celui qui est vérifié détermine la valeur qui est envoyée avec le formulaire:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

Le changement événement ne se déclenche pas lorsqu'un bouton radio est de. Donc, si la radio avec valeur="1" est déjà sélectionné et que l'utilisateur sélectionne le deuxième, handleChange1() ne fonctionne pas. Cela pose un problème (pour moi en tout cas), il n'existe aucun cas où je peux peut attraper cette dé-sélection.

Ce que je voudrais, c'est une solution de contournement pour l'événement onchange de la case de valeur de groupe ou d'un oncheck événement qui détecte non seulement lorsque la radio est coché, mais aussi quand elle n'est pas cochée.

Je suis sûr que certains d'entre vous ont rencontré ce problème avant. Ce sont quelques solutions de contournement (ou, idéalement, ce est la bonne façon de gérer cela)? Je veux juste attraper le changement de l'événement, de l'accès précédemment coché la radio ainsi que le tout nouveau vérifié radio.

P. S.
onclick semble comme un meilleur (cross-browser) de l'événement pour indiquer quand une radio est coché, mais il n'est toujours pas résolu l'onu-vérifié problème.

Je suppose que cela a du sens pourquoi onchange pour un type case à cocher ne travail que dans un cas comme celui-ci car il modifie la valeur qu'il soumet quand vous cochez ou décochez-il. Je souhaite que les boutons de la radio se comportait plus comme un élément SELECT du onchange mais que pouvez-vous faire...

Answer 1

<form name="myForm">
            <input type="radio" name="myRadios"  value="1" />
            <input type="radio" name="myRadios"  value="2" />
        </form>

<script>
var rad = document.myForm.myRadios;
var prev = null;
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
        (prev)? console.log(prev.value):null;
        if(this !== prev) {
            prev = this;
        }
        console.log(this.value)
    };
}
</script>

Answer 2

Je voudrais faire deux changements:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. Utiliser l' onclick gestionnaire au lieu de onchange - vous êtes à la modification de la "vérifié" de la radio d'entrée, pas le value, donc il n'y a pas un changement événement se produise.
2. Utiliser une seule fonction, et passez - this comme un paramètre, qui font qu'il est facile de vérifier que la valeur est actuellement sélectionné.

ETA: avec votre handleClick() fonction, vous pouvez suivre l'original / l'ancienne valeur de la radio dans une page d'étendue variable. C'est:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

Answer 3

Comme vous pouvez le voir sur cet exemple: http://jsfiddle.net/UTwGS/

à la fois l' click et change les événements sont déclenchés lors de la sélection d'un bouton radio (au moins dans certains navigateurs).

Je tiens également à préciser que dans mon exemple, l' click événement est encore tiré lorsque vous utilisez l'onglet et le clavier pour sélectionner une option.

Donc, mon point est que même si l' change événement est déclenché en est certains navigateurs, l' click événement offre la couverture dont vous avez besoin.

Answer 4

Comme vous pouvez le voir ici: http://www.w3schools.com/jsref/event_onchange.asp L'attribut onchange n'est pas pris en charge pour les boutons radio.

La première question SO liée par vous vous donne la réponse: utilisez plutôt l'événement onclick et vérifiez l'état du bouton radio dans la fonction qu'il déclenche.

Answer 5

Oui il n'y a pas de changement événement actuellement sélectionné bouton radio. Mais le problème est que lorsque chaque bouton radio est considéré comme un élément distinct. Au lieu d'un groupe de boutons radio devraient être considérés comme un seul élément comme select. Afin de modifier l'événement est déclenché pour ce groupe. Si c'est un select élément nous n'avons jamais vous soucier de chaque option, mais de prendre uniquement l'option sélectionnée. Nous stockons la valeur actuelle d'une variable qui deviendra la valeur précédente, lorsqu'une nouvelle option est sélectionnée. De même, vous devez utiliser une variable pour stocker la valeur de coché le bouton radio.

Si vous souhaitez identifier le bouton radio précédent, vous avez à boucle sur mousedown événement.

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

voir ceci : http://jsfiddle.net/diode/tywx6/2/