meilleure façon d'obtenir un rappel quand un bouton radio est cliqué en javascript

Question

J'ai HTML comme ceci:

<input type="radio" name="v" value="1"> 1<br> 
<input type="radio" name="v" value="2"> 2<br> 
<input type="radio" name="v" value="3" checked> 3<br> 

Je veux savoir comment surveiller tous ces boutons radio. Je pourrais avoir beaucoup plus que 3.

Une chose que j'ai considéré est d'avoir une fonction onclick pour chacun d'eux. Est-ce la bonne façon, ou existe-t-il une façon plus simple d'enregistrer une fonction javascript courante lorsque le jeu de boutons radio a changé?

Answer 1

Vous pouvez ajouter un écouteur d'événement au parent de ces éléments. Les événements survolent l'arborescence DOM, vous n'avez donc besoin que d'attacher un gestionnaire.

Voir un exemple ici: http://jsfiddle.net/cLzBV/3/

Answer 2

<input class="someclass" type="radio" name="v" value="1"> 1<br> 
<input class="someclass" type="radio" name="v" value="2"> 2<br> 
<input class="someclass" type="radio" name="v" value="3" checked> 3<br> 

function yourcallback() 
{ 

} 
$('.someclass").click(yourcallabck); 

Ce chemin, vous pouvez le faire en utilisant jquery

Answer 3

Outre le commentaire de Markandey: si vous utilisez jquery, vous pouvez utiliser les sélecteurs d'attribut au lieu de classnames sans trop de tracas pour que vous ayez un code minimal.

$ ("entrée [nom = v]"). Cliquez sur (mycallback);

Dans la fonction mycallback, 'ceci' se rapporte à l'élément sur lequel vous avez cliqué.

par exemple. La mise en place d'un attribut onclick sur chaque élément crée une céphalée de maintenance. Cela vous empêche également de traiter le HTML et le JavaScript comme des couches distinctes - une couche de données et une couche de comportement - de la même manière que CSS est votre couche de présentation.

L'écoute d'événements est une façon plus mature de développer du JavaScript. Au début, il faut s'habituer un peu (car il n'est plus évident à partir de l'élément que certaines fonctionnalités seront déclenchées lorsque vous cliquez dessus) mais vous trouverez rapidement votre chemin en organisant et en commentant mieux votre code. Edité parce que j'ai vu que je n'avais pas transformé le 'ceci' en un objet jquery, et quand vous êtes dans le rappel 'ceci' est l'objet DOM natif, donc .val() ne fonctionnerait pas.

Answer 4

Vous pouvez utiliser Jquery ajouter la classe à toutes les radios, comme ajouter « RadioClass » fichier jquery à votre page et utilisez le code ci-dessous ...

$(document).ready(function() { 
    $('.RadioClass').click(function() { 
     alert($(this).val()); 
    }); 
}); 

Answer 5

How do I register a javascript event handler to an element that hasn't been added to the page yet... Ceci est un poste similaire avec une bonne solution permettant de avoir une fonction 'onclick' pour chacun d'entre eux.

Et suivant le code que je vois utile:

document.onclick = myRadioButtonOnClickHandler; 

function myRadioButtonOnClickHandler(e) { 
    var realTarget = e ? e.target : window.event.srcElement; 
    if (realTarget.nodeName.toLowerCase() === 'input' && realTarget.type === 'radio') { 
     doSomething(); 
    } 
} 

Espérons utile.