43
Comment appeler onclick sur une liste de radiobutton en utilisant javascript?Appeler onclick sur une liste de radiobutton en utilisant javascript
A
Répondre
33
Comment générez-vous la liste des boutons radio? Si vous êtes juste en utilisant HTML:
<input type="radio" onclick="alert('hello');"/>
Si vous générez ces via quelque chose comme ASP.NET, vous pouvez l'ajouter comme un attribut à chaque élément dans la liste. Vous pouvez exécuter cette après vous remplissez votre liste, ou en ligne si vous construisez votre liste un par un:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
Plus d'info: http://www.w3schools.com/jsref/event_onclick.asp
15
Je suis d'accord avec @annakata que cette question a besoin d'un certain plus de précisions, mais voici un très, par exemple très basique de la façon de configurer un gestionnaire d'événements onclick pour les boutons radio:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
</script>
</head>
<body>
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
</body>
</html>
7
le problème ici est que le rendu d'une RadioButtonList enveloppe les boutons radio individuels (ListItems) dans les balises span et e Lorsque vous affectez un gestionnaire d'événements côté client à l'élément de liste directement à l'aide des attributs, il affecte l'événement à l'intervalle. L'affectation de l'événement à RadioButtonList l'affecte à la table dans laquelle il est rendu.
L'astuce consiste ici à ajouter les ListItems sur la page aspx et non pas à partir du code derrière. Vous pouvez ensuite affecter la fonction JavaScript à la propriété onClick. Ce blog attaching client-side event handler to radio button list by Juri Strumpflohner explique tout cela. Cela fonctionne uniquement si vous connaissez les ListItems à l'avance et n'aide pas où les éléments de RadioButtonList doivent être ajoutés dynamiquement en utilisant le code derrière.
+1
Pour empirer les choses, onClick ne vient pas non plus dans Intellisense. Merci, cela a aidé. – Narayana
21
Pour déclencher l'événement onClick sur un bouton radio appeler la méthode click() sur l'élément DOM:
document.getElementById("radioButton").click()
utilisant jquery:
$("#radioButton").click()
AngularJS:
angular.element('#radioButton').trigger('click')
+1
Il y a cependant une chose avec le .click(): Si vous changez la valeur sélectionnée d'une radio avec javascript comme ça, l'évènement 'change' ne se déclenche pas dans IE (j'ai essayé IE8) – Michiel
+0
@Michiel merci beaucoup, ce commentaire a résolu un problème très délicat pour moi! Posté une question/réponse à ce sujet - http://stackoverflow.com/a/13827249/66372 ps. le comportement est également présent en chrome – eglasius
0
essayer solution suivante
HTML:
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
JS:
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
Ne pas vous dire foreach (ListItem RadioButton à RadioButtons.Items)? – Fandango68