web-dev-qa-db-fra.com

Appel sur un clic sur une liste de radiobutton à l'aide de javascript

Comment appeler onclick sur une liste de boutons radio en utilisant javascript?

javascriptonclickradiobuttonlist
46
sajay

Comment générez-vous la liste des boutons radio? Si vous utilisez seulement HTML:

<input type="radio" onclick="alert('hello');"/>

Si vous les générez via quelque chose comme ASP.NET, vous pouvez l'ajouter en tant qu'attribut à chaque élément de la liste. Vous pouvez l'exécuter après avoir renseigné votre liste ou y ajouter une liste si vous la créez une par une:

foreach(ListItem RadioButton in RadioButtons){
    RadioButton.Attributes.Add("onclick", "alert('hello');");
}

Plus d'infos: http://www.w3schools.com/jsref/event_onclick.asp

37
Michael Haren

Pour déclencher l'événement onClick sur un bouton radio, appelez la méthode click() sur l'élément DOM:

document.getElementById("radioButton").click()

en utilisant jquery:

$("#radioButton").click()

AngularJs:

angular.element('#radioButton').trigger('click')
21
Vitalii Fedorenko

Je conviens avec @annakata que cette question nécessite des éclaircissements supplémentaires, mais voici un exemple très très simple de la configuration d’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>
15
Tom

Le problème ici est que le rendu d'une RadioButtonList englobe les boutons radio individuels (ListItems) dans des balises span et même lorsque vous affectez un gestionnaire d'événements côté client à l'élément de liste directement à l'aide d'attributs, l'événement est affecté à la span. Assigner l’événement à RadioButtonList l’assigne à la table qu’il affiche.

L'astuce consiste ici à ajouter les ListItems sur la page aspx et non à partir du code qui se trouve derrière. Vous pouvez ensuite affecter la fonction JavaScript à la propriété onClick. Cet article de blog; attacher un gestionnaire d’événements côté client à la liste de boutons radio de Juri Strumpflohner explique tout.

Cela ne fonctionne que si vous connaissez les éléments de liste à l'avance et n'aide pas les éléments de la liste RadioButtonList à ajouter dynamiquement à l'aide du code ci-dessous.

7
Dave Anderson

essayez la 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();
       });

   });
3
saim2025
Hi, I think all of the above might work. In case what you need is simple, I used:

<body>
    <div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
        <input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
        <input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
    </div>

<script>
function checkRadio(name) {
    if(name == "one"){
    console.log("Choice: ", name);
        document.getElementById("one-variable-equations").checked = true;
        document.getElementById("multiple-variable-equations").checked = false;

    } else if (name == "multiple"){
        console.log("Choice: ", name);
        document.getElementById("multiple-variable-equations").checked = true;
        document.getElementById("one-variable-equations").checked = false;
    }
}
</script>
</body>
0
Daniela