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();
});
});
Questions connexes
- 1. Comment appeler la fonction jquery personnalisée onClick
- 2. Comment appeler une fonction javascript sur onrowcommand?
- 3. Appeler Rich Panel Modal Onclick
- 4. Envoyer un onclick à une liste déroulante
- 5. Appeler javascript variables paramètres de la fonction globale sur le <a href > onclick même
- 6. Liste de Dashcode - OnClick
- 7. comment appeler une autre fonction en javascript?
- 8. Prévenir javascript onclick sur l'élément enfant
- 9. javascript onclick événement sur l'objet flash
- 10. événement onclick sur cancel la table en utilisant jquery
- 11. Trier la liste déroulante en utilisant Javascript
- 12. Appeler une URL à partir de javascript
- 13. Index des onglets de la liste RadioButton
- 14. Comment appeler un contrôle ActiveX en utilisant javascript dans une page ASP.NET
- 15. Comment appeler/générer pop up nyro modale en utilisant javascript
- 16. Comment appeler un composant COM en utilisant JavaScript dans Mozilla?
- 17. Ajouter une propriété onclick entrée avec JavaScript
- 18. Appeler une fonction avec une liste d'arguments en python
- 19. Comment appeler une fonction appartenant à un autre objet en JavaScript (en utilisant script.aculo.us)
- 20. RadioButton vérifié l'état sur asp: LinkButton postback
- 21. javascript onclick remove single checkbox
- 22. Suivre une URL en utilisant JavaScript
- 23. Passer les données à la base de données en utilisant javascript Onclick
- 24. Comment appeler une fonction Javascript en utilisant la valeur d'une variable chaîne?
- 25. Comment puis-je appeler une action MVC sur un événement keybox keybox en utilisant json?
- 26. Comment appeler une procédure stockée via webservice en utilisant C#?
- 27. Changer la couleur de l'élément de liste de radiobutton désactivé
- 28. appeler une fonction VB.net depuis javascript
- 29. Liste RadioButton dans GridView - Liaison de données bidirectionnelle possible?
- 30. problème en utilisant javascript onload
Ne pas vous dire foreach (ListItem RadioButton à RadioButtons.Items)? – Fandango68