javascript jquery bouton radio cliquez sur

89

J'ai 2 boutons radio et jquery en cours d'exécution.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

Maintenant, avec un bouton, je peux définir onClick pour exécuter une fonction. Comment faire pour que les boutons radio exécutent une fonction lorsque je clique sur l'un d'eux?

javascript jquery

— David19801
source

4

Remarque. Il est préférable que les éléments de formulaire ne répondent pas au clic, car de nombreuses personnes naviguent dans les formulaires à l'aide du clavier.

— Superluminary

167

Vous pouvez utiliser .changepour ce que vous voulez

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

à partir de jQuery 1.3

vous n'avez plus besoin du '@'. La bonne façon de sélectionner est:

$("input[name='lom']")

— Peter Kelly
source

7

Notez qu'à partir de jQuery 1.3, vous n'avez plus besoin du '@'. La bonne façon de sélectionner est:$("input[name='lom']")

— lubar

4

Est-il possible d'intégrer cette solution avec la solution de @JohnIdol ci-dessous avec des instructions conditionnelles basées sur des valeurs radio? ex

$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;

— LazerSharks

Depuis jQuery 1.3, vous ne devez pas utiliser «@» avec la propriété name. Si vous le faites, vous obtiendrez une jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionerreur. Ce n'est donc pas une question de choix.

— scaryguy du

53

Si vous avez vos radios dans un conteneur avec id = radioButtonContainerId, vous pouvez toujours utiliser onClick, puis vérifier lequel est sélectionné et exécuter en conséquence certaines fonctions:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

— JohnIdol
source

Je vous remercie. Cela a fonctionné pour moi, car mon champ faisait partie d'un tableau et je ne pouvais pas utiliser la notation input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">

— crafter

Cela réagit-il même si vous appuyez sur la touche vers le bas et déplacez le marqueur avec les touches fléchées?

— Alisso le

cela ne fonctionnera pas dans le # sélecteur mobile ne fonctionne pas dans le mobile.

— zawhtut

19

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()

— Bishoy Hanna
source

1

Bien que cette réponse ne montre pas comment câbler le code à l'événement, j'aime bien qu'elle contienne des informations sur la façon de récupérer la valeur du groupe de boutons radio.

— Manfred

1

$ ("input [@ name = 'lom']"). change (function () {// Faites quelque chose d'intéressant ici});

— Bishoy Hanna

11

ça devrait être bon

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});

— Adam Lukaszczyk
source

Vous avez manqué a); À l'arrière.

— Biswas Khayargoli

8

Il y a plusieurs moyens de le faire. Il est néanmoins fortement recommandé d'avoir un conteneur autour des boutons radio, mais vous pouvez également mettre une classe directement sur les boutons. Avec ce HTML:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

vous pouvez sélectionner par classe:

$(".shapeButton").click(SetShape);

ou sélectionnez par ID de conteneur:

$("#shapeList").click(SetShape);

Dans les deux cas, l'événement se déclenchera en cliquant sur le bouton radio ou sur l'étiquette correspondant, bien que curieusement dans ce dernier cas (en sélectionnant par "#shapeList"), cliquer sur l'étiquette déclenchera la fonction de clic deux fois pour une raison quelconque, à moins dans FireFox; la sélection par classe ne fera pas cela.

SetShape est une fonction et ressemble à ceci:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

De cette façon, vous pouvez avoir des étiquettes sur vos boutons et plusieurs listes de boutons radio sur la même page qui font des choses différentes. Vous pouvez même demander à chaque bouton individuel de la même liste de faire des choses différentes en définissant un comportement différent dans SetShape () en fonction de la valeur du bouton.

— ZeroK
source

3

il est toujours bon de restreindre la recherche DOM. il vaut donc mieux utiliser un parent aussi, pour que tout le DOM ne soit pas parcouru.

C'EST TRÈS RAPIDE

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });

— Vins
source