web-dev-qa-db-fra.com

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

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

Considérez 2 entrées de type radio portant le même nom. Une fois soumis, celui qui est vérifié détermine la valeur 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 changement ne se déclenche pas lorsqu'un bouton radio est désélectionné. Donc, si la radio avec value = "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) en ce sens qu'il n'y a aucun événement où je peux attraper cette dé-sélection.

Ce que j'aimerais, c'est une solution de contournement de l'événement onchange pour la valeur du groupe de cases à cocher ou bien un événement oncheck qui détecte non seulement le moment où une radio est cochée, mais également son désélection.

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

P.S.
onclick semble être un meilleur événement (multi-navigateurs) pour indiquer le moment où une radio est activée, mais cela ne résout toujours pas le problème non vérifié.

Je suppose qu'il est logique de choisir onchange pour un type de case à cocher ne fonctionne dans un cas comme celui-ci puisqu'il modifie la valeur qu'il soumet lorsque vous l'activez ou le désélectionnez. Je souhaite que les boutons radio se comportent davantage comme un élément SELECT sur l'échange, mais que pouvez-vous faire ...

javascripthtmlcross-browser
158
Matthew
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/

153
Michal

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. Utilisez le gestionnaire onclick au lieu de onchange - vous modifiez l'état "vérifié" de l'entrée radio, pas le value, de sorte qu'aucun événement de modification ne se produit.
  2. Utilisez une seule fonction et transmettez this en tant que paramètre, ce qui facilitera la vérification de la valeur actuellement sélectionnée.

ETA: En plus de votre fonction handleClick(), vous pouvez suivre la valeur originale/ancienne de la radio dans une variable comportant une page. C'est:

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

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 deux événements click et change sont déclenchés lors de la sélection d'une option de bouton radio (du moins dans certains navigateurs).

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

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

34
Philip Walton

Qu'en est-il de l'utilisation de l'événement change 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/

6
Razan Paul

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 avoir réfléchi un peu plus, j'ai décidé de supprimer la variable et d’ajouter/supprimer une classe. Voici ce que j'ai obtenu: http://jsfiddle.net/BeQh3/2/

6
Alex Okrushko

Stocker la radio cochée précédemment 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);

JS EXEMPLE DE CODE

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);
5
Dimitar Bonev

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

<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>
5
John K

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 que vous associez 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.

4
Connum

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 séparé. Au lieu de cela, un groupe radio devrait être considéré comme un élément unique tel que select. Donc, l'événement change est déclenché pour ce groupe. S'il s'agit d'un élément select, nous ne nous soucions jamais de chacune des options, mais prenons uniquement 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 effectuer 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/

4
Diode

C’est tout bonnement mon idée, mais vous pouvez créer un événement onClick pour chaque bouton radio, leur attribuer des identifiants différents, puis créer une boucle for dans l’événement pour passer en revue chaque bouton radio du groupe et trouver lequel a été vérifié en regardant l'attribut "vérifié". L'identifiant de celui qui est coché sera 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 se déclenchera, qu'un nouveau bouton radio soit activé ou non.

2
Andrew Latham

Si vous souhaitez éviter les scripts en ligne, vous pouvez simplement écouter un événement de clic sur la radio. Ceci peut être réalisé avec Javascript simple en écoutant un événement click 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);
      }
}
2
mareks
<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>
2
umesh unnikrishnan

ça marche 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>
1
Doberon

Il s’agit de la fonction la plus simple et la plus efficace à utiliser. Il vous suffit d’ajouter autant de boutons que vous le souhaitez à la case Check = false et de faire en sorte que l’événement onclick de chaque bouton radio appelle cette fonction. Désigner 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;
}
0
Jama