Événement de changement de pas de tir lorsque le bouton radio est sélectionné avec le clavier

<script>
$("input[name='my_radio_button']").change(function(){
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
                do_this_stuff(); 
    } else { do_other_stuff(); }
});
</script>

<input type="radio" name="my_radio_button1" id="radio1" value="ONE" checked />
<input type="radio" name="my_radio_button2" id="radio2" value="TWO" />

(à supposer complet en HTML et le script de tir quand tout est prêt)

L'événement de changement semble un incendie lorsque vous cliquez sur pour sélectionner une option radio, mais pas lorsque la sélection est modifiée avec le clavier. Peut-on faire quelque chose à ce sujet?

edit - ne fait aucune différence si j'utilise bind ou live -- est-ce juste un bug?

De préciser, le cas ne se déclenche pas, même après le focus est perdu.

edit 2 - personne ne connaît la raison de cela?

modifier 3 - comme DonaldIsFreak a souligné ce qui semble être un chrome problème

Ce que vous avez, dans l'ordre, il en, ne devrait pas l'être du tout, êtes-vous sûr que vous obtenez tout comportement, même avec un seul clic?
Craver -- est-ce mieux?
Lorsque j'exécute ce script sur le navigateur firefox est un succès,mais sur le navigateur google Chrome, pas de changement. je suppose que ce problème à propos de jquery gestionnaire d'événement. Quelle version vous utilisez jquery?
1.4.2

InformationsquelleAutor Greg | 2010-10-26

jquery

Ici est fiable fixer http://evilstreak.co.uk/blog/fixing-change-events-on-radios

Et en l'utilisant, c'est comment vous pouvez vous la mettre en œuvre avec votre exemple:
Et voici une démo du code ci-dessous http://www.jsfiddle.net/uDkdJ/1/
J'ai testé cette démo dans FF3.6, IE8, Safari5, Chrome7, et Opera10.65

$.fn.fix_radios = function() {
  function focus() {
    if ( !this.checked ) return;
    if ( !this.was_checked ) {
      $( this ).change();
    }
  }

  function change( e ) {
    if ( this.was_checked ) {
      e.stopImmediatePropagation();
      return;
    }
    $( "input[name=" + this.name + "]" ).each( function() {
      this.was_checked = this.checked;
    } );
  }
  return this.focus( focus ).change( change );
}

$(function() {
  $( "input[type=radio]" ).fix_radios();
  $("input[name='my_radio_button']").change(function(){
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  });
});

Je n'ai pas eu l'occasion de tester encore, mais j'ai confiance que cela fonctionne. Je vais faire usage de cette. Merci!!!!
ne fonctionne pas lorsque vous cliquez sur div autour de la radio, le navigateur de vérification automatique de la radio
semble bien fonctionner. jetez un oeil jsfiddle.net/uDkdJ/302

InformationsquelleAutor John Hartsock

En jquery 1.4.2 @ sélecteur ne fonctionne pas.
Regardez cet exemple pour voir si il est utile pour vous, le changement de l'événement "change" par "clic".

html

<input type="radio" name="rdio" value="a" checked="checked" />
<input type="radio" name="rdio" value="b" />
<input type="radio" name="rdio" value="c" />

<br />

<div id="test"></div>

javascript:

$("input[name='rdio']").click(function(){
    if ($("input[name='rdio']:checked").val() == 'a')
        $("#test").append("<div>a</div>");
    else if ($("input[name='rdio']:checked").val() == 'b')
        $("#test").append("<div>b</div>");
    else
        $("#test").append("<div>c</div>");
});

exemple

ref 1

ref 2

Cela fonctionne comme un charme! Merci!

InformationsquelleAutor andres descalzo

0

Malheureusement, des boutons radio ne pas le feu événements de modification lors de changé avec le clavier, jusqu'à en perdre le focus.

Si vous souhaitez contourner ce problème, vous pouvez toujours configurer un minuteur qui surveille l'état, et distribue un événement quand elle change. Quelque chose comme (pseudo-code):
```
var monitorRadio = function(radio)
{
   var state = $("input[@name='']:checked").val();
   $(radio).data("state", state);
   var func = function()
   {
     var state = $("input[@name='']:checked").val();
     if (state != $(radio).data("state"))
     {
       $(radio).data("state", state);
       //dispatch the change event
       $(radio).change();
     }
     setTimeout(100, func());
   };   


   func();
}
```
- Merci pour la solution de contournement, mais mon code ne fonctionne pas même après les boutons de la radio perdre le focus. Je vais onglet à un autre champ et jquery ignore simplement la changer entièrement. La boîte de sélection, par exemple, fonctionne correctement lorsque modifiée et mise au point est perdu.
InformationsquelleAutor Scott S
0

Je ne suis pas du avoir beaucoup de chance d'obtenir le radio bouton pour changer l'état avec les touches fléchées dans mon jsfiddle, voici donc un aveugle réponse:

Utilisation .keypress() La même règle concernant le fait de ne pas changer jusqu'à perdre le focus s'applique à sélectionner les boîtes, et j'ai utilisé avec succès .keypress() il

http://api.jquery.com/keypress/

InformationsquelleAutor SooDesuNe

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
    do_this_stuff(); 
  } else { do_other_stuff(); }
});

Le problème avec cette méthode est que l'événement se déclenche lorsque l'utilisateur appuie sur une touche, et encore, quand il perd le focus. Je ne suis pas sûr de ce que do_this_stuff() et do_other_stuff() faire, mais si leur tir plus d'une fois est un problème, vous pouvez résoudre ce problème avec un var pour vérifier que la valeur précédente a été, afin de savoir si c'est réellement changé:

$("input[name='my_radio_button']").bind('change keypress', function(){
  if ($(this).value() != prevValue) {
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  }
  prevValue = $(this).value();
});

InformationsquelleAutor Nathan MacInnes

Vous devez vous connecter pour publier un commentaire.