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

Je recherche une solution généralisée pour cela.

Considérez 2 entrées de type radio avec le même nom. Une fois soumis, celui qui est coché 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" />

L'événement de modification ne se déclenche pas lorsqu'un bouton radio est désélectionné. Donc, si la radio avec valeur = "1" est déjà sélectionnée et que l'utilisateur sélectionne la seconde, handleChange1 () ne s'exécute pas. Cela pose un problème (pour moi en tout cas) dans la mesure où il n'y a pas d'événement où je puisse attraper cette désélection.

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

Je suis sûr que certains d'entre vous ont déjà rencontré ce problème. Quelles sont les solutions de contournement (ou, idéalement, quelle est la bonne façon de gérer cela)? Je veux juste attraper l'événement de changement, accéder à la radio précédemment vérifiée ainsi qu'à la radio nouvellement vérifiée.

PS
onclick semble être un meilleur événement (cross-browser) pour indiquer quand une radio est vérifiée mais il ne résout toujours pas le problème non vérifié.

Je suppose qu'il est logique de savoir pourquoi onchange pour un type de case à cocher fonctionne dans un cas comme celui-ci, car il modifie la valeur qu'il soumet lorsque vous le cochez ou le décochez. Je souhaite que les boutons radio se comportent plus comme onchange d'un élément SELECT mais que pouvez-vous faire ...

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

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

Voici une démo de JSFiddle: https://jsfiddle.net/crp6em1z/

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 onclickgestionnaire 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.
2. Utilisez une seule fonction et passez thisen paramètre, ce qui facilitera la vérification de la valeur actuellement sélectionnée.

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

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

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

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

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 clicket changesont 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' clickévénement est toujours déclenché 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é dans certains navigateurs, l' clickévénement doit fournir la couverture dont vous avez besoin.

Qu'en est-il de 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 onclickplutôt l' événement et vérifiez l'état du bouton radio à l'intérieur de la fonction qu'il déclenche.

Je ne pense pas qu'il y ait d'autre moyen que 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 une classe. Voici ce que j'ai obtenu: http://jsfiddle.net/BeQh3/2/

Oui, il n'y a pas d'événement de modification pour le bouton radio actuellement sélectionné. Mais le problème est que chaque bouton radio est considéré comme un élément distinct. Au lieu de cela, un groupe radio devrait être considéré comme un élément unique comme select. L'événement de changement est donc déclenché pour ce groupe. Si c'est unselect élément, nous ne nous soucions jamais de chaque option, mais ne prenons que l'option sélectionnée. Nous stockons la valeur actuelle dans 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 distincte pour stocker la valeur du bouton radio coché.

Si vous souhaitez identifier le bouton radio précédent, vous devez boucler sur l' 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/

Stockez la radio précédemment vérifiée 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);

CODE EXEMPLE 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);

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>

C'est juste par dessus ma tête, mais vous pouvez faire un événement onClick pour chaque bouton radio, leur donner tous les ID différents, puis faire une boucle for dans l'événement pour parcourir chaque bouton radio du groupe et trouver lequel est a été vérifié en regardant l'attribut «vérifié». L'identifiant de la variable cochée 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 de clic se déclencherait, qu'un nouveau bouton radio soit coché ou non.

<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 souhaitez éviter les scripts en ligne, vous pouvez simplement écouter un événement de clic sur la radio. Cela peut être réalisé avec du Javascript brut 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);
      }
}

Vous pouvez ajouter le script JS suivant

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

cela fonctionne pour moi

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

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

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

Manière la plus simple et la plus puissante

lecture seule des entrées radio à l'aide de getAttribute

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2