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

Je ferais deux changements:

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

1. utilisez le gestionnaire onclick au lieu de onchange - vous modifiez l ' "état vérifié" de l'entrée radio, pas le value, donc il n'y a pas d'événement de changement qui se passe.
2. utilisez une seule fonction et passez this en paramètre, ce qui facilitera la vérification de la valeur actuellement sélectionnée.

ETA: avec votre fonction handleClick(), Vous pouvez suivre la valeur originale / ancienne de la radio dans une variable à portée de page. Que est:

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

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

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

JQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

Les événements click et change sont déclenchés lors de la sélection d'une option de bouton radio (au moins dans certains navigateurs).

Je dois également souligner que dans mon exemple, l'événement click est toujours déclenché lorsque vous utilisez tab et le clavier pour sélectionner une option.

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

Je ne pense pas qu'il existe un autre moyen de stocker l'état précédent. Voici la solution avec jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

Après y avoir réfléchi un peu plus, j'ai décidé de me débarrasser de la variable et d'Ajouter/Supprimer la classe. Voici ce que j'ai eu: http://jsfiddle.net/BeQh3/2/

Je me rends compte que c'est un vieux problème, mais cet extrait de code fonctionne pour moi. Peut-être que quelqu'un dans le futur le trouvera utile:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

Que sur l'utilisation de l'événement de changement de Jquery?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

Jsfiddle: http://jsfiddle.net/f8233x20/

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 l'événement onclick à la place et vérifiez l'état du bouton radio à l'intérieur de la fonction qu'il déclenche.

Oui il n'y a pas d'événement de changement pour le bouton radio actuellement sélectionné. Mais le problème est quand chaque bouton radio est pris comme un élément séparé. Au lieu de cela, un groupe radio devrait être considéré comme un élément unique comme select. L'événement change est donc déclenché pour ce groupe. S'il s'agit d'un élément select, nous ne nous inquiétons jamais de chaque option, mais nous ne prenons que 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 un variable séparée pour stocker la valeur du bouton radio vérifié.

Si vous voulez identifier le bouton radio précédent, vous devez faire une boucle sur l'événement mousedown.

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/

Stockez la radio vérifiée précédente dans une variable:
http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

EXEMPLE DE CODE JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

C'est juste en haut de ma tête, mais vous pouvez faire un événement onClick pour chaque bouton radio, leur donner tous les identifiants différents, puis faire une boucle for dans l'événement pour passer par chaque bouton radio dans le groupe et trouver qui a été vérifié en regardant l'attribut 'checked'. L'id de celui vérifié serait stocké en tant que variable, mais vous voudrez peut-être d'abord utiliser une variable temporaire pour vous assurer que la valeur de cette variable a changé, car l'événement click déclencherait ou non un nouveau le bouton radio a été vérifié.

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

Si vous voulez éviter le script en ligne, vous pouvez simplement écouter un événement de clic sur la radio. Cela peut être réalisé avec JavaScript en écoutant un événement de clic sur

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

C'est la fonction la plus simple et la plus efficace à utiliser, il suffit d'ajouter autant de boutons que vous le souhaitez à checked = false et de faire l'événement onclick de chaque radio buttoncall cette fonction. Désigner un numéro unique pour chaque radio bouton

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;

}