Comment savoir quel bouton radio est sélectionné via jQuery?

2707

J'ai deux boutons radio et je souhaite publier la valeur de celui sélectionné. Comment puis-je obtenir la valeur avec jQuery?

Je peux les obtenir tous comme ça:

$("form :radio")

Comment savoir lequel est sélectionné?

juan
la source

Réponses:

3936

Pour obtenir la valeur de l' élément sélectionné radioName d'un formulaire avec id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Voici un exemple:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Peter J
la source
306
J'ai fini par utiliser ceci: $ ('form input [type = radio]: checked')
juan
46
@PeterJ: Pourquoi avez-vous utilisé deux arguments au lieu de simplement '#myform input[name=radioName]:checked'?
Sophie Alpert du
145
jQuery fonctionne mieux lorsqu'il est correctement défini, et la sélection par ID est toujours le sélecteur le plus performant. La méthode à deux arguments est simplement une autre façon de procéder.
Peter J
40
Pour de meilleures performances, la documentation recommande de ne pas utiliser: le sélecteur radio. api.jquery.com/radio-selector
Peter J
2
Autre: $ ('. ClassName: vérifié');
Meetai.com
410

Utilisez ceci..

$("#myform input[type='radio']:checked").val();
Joberror
la source
64
Si votre formulaire a plusieurs ensembles de boutons radio, cela ne donnera que la valeur du premier ensemble, je pense.
Brad
3
Cela ne renverra que la valeur du premier bouton radio coché dans le formulaire. Cela devrait être fait comme le suggérait Peter J.
MickJ
3
@MickJ Ce morceau de code est le même que celui de Peter J ... Considérant le cas d'utilisation de la question d'origine. Cependant, si vous avez différents groupes de boutons radio, cela ne fonctionnera pas. C'est pourquoi il est préférable d'utiliser [name = selector]
Lyth
1
Comme @Brad l'a mentionné, cela n'obtiendra que la valeur du premier ensemble. Ce que vous voulez, c'est remplacer ".val ()" par ".map (function () {return this.value;}). Get ();"
AM_
1
Pour ce que ça vaut (oui, je sais l'optimisation avant d'avoir besoin de bla bla) mais pour des performances pures, cela fonctionne plus rapidement, en particulier dans les navigateurs plus anciens:$("#myform").find("input[type='radio']:checked").val();
Mark Schultheiss
307

Si vous avez déjà une référence à un groupe de boutons radio, par exemple:

var myRadio = $("input[name=myRadio]");

Utilisez la filter()fonction, non find(). ( find()sert à localiser les éléments enfants / descendants, tandis que filter()recherche les éléments de niveau supérieur dans votre sélection.)

var checkedValue = myRadio.filter(":checked").val();

Remarques: Cette réponse corrigeait à l'origine une autre réponse qui recommandait l'utilisation find(), qui semble avoir été modifiée depuis. find()pourrait toujours être utile dans le cas où vous aviez déjà une référence à un élément conteneur, mais pas aux boutons radio, par exemple:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
Matt Browne
la source
7
Je voulais juste ajouter, par souci de clarté, que find () recherche en fait tous les éléments descendants (qui correspondent au sélecteur donné). Si vous ne voulez que des enfants directs, utilisez children ().
Matt Browne
139

Cela devrait fonctionner:

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

Notez le "" utilisé autour de l'entrée: vérifié et non '' comme la solution de Peter J

Cam Tullos
la source
ce devrait être la réponse choisie. le nom est un très bon moyen de garder une trace des boutons radio
quemeful
79

Vous pouvez utiliser le sélecteur: coché avec le sélecteur radio.

 $("form:radio:checked").val();
tvanfosson
la source
13
Cela a l'air bien, cependant, la documentation jQuery recommande d'utiliser [type = radio] plutôt que: radio pour de meilleures performances. Il s'agit d'un compromis entre lisibilité et performances. Je prends normalement la lisibilité sur les performances sur des questions aussi triviales, mais dans ce cas, je pense que [type = radio] est en fait plus clair. Dans ce cas, cela ressemblerait à $ ("form input [type = radio]: checked"). Val (). Pourtant, une réponse valable.
Aucun
57

Si vous voulez juste la valeur booléenne, c'est-à-dire si elle est cochée ou non, essayez ceci:

$("#Myradio").is(":checked")
Juan
la source
53

Obtenez toutes les radios:

var radios = jQuery("input[type='radio']");

Filtrez pour obtenir celui qui est vérifié

radios.filter(":checked")
Alex V
la source
48

Une autre option est:

$('input[name=radioName]:checked').val()
Dragon Rouge
la source
6
La partie ": radio" n'est pas nécessaire ici.
Matt Browne
31
$("input:radio:checked").val();
Phillip Senn
la source
25

Voici comment j'écrirais le formulaire et gérerais l'obtention de la radio vérifiée.

En utilisant un formulaire appelé myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Obtenez la valeur du formulaire:

$('#myForm .radio1:checked').val();

Si vous ne postez pas le formulaire, je le simplifierais davantage en utilisant:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Ensuite, obtenir la valeur vérifiée devient:

    $('.radio1:checked').val();

Avoir un nom de classe sur l'entrée me permet de styler facilement les entrées ...

Darin Peterson
la source
24

Dans mon cas, j'ai deux boutons radio sous une forme et je voulais connaître l'état de chaque bouton. Cela ci-dessous a fonctionné pour moi:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

rmbianchi
la source
1
Que voulez-vous dire le statut de chaque bouton? les boutons radio avec le même nom ne permettent de cocher qu'un seul, par conséquent, si vous obtenez le coché, les autres ne sont pas cochés.
Dementic
17

Dans un bouton radio généré par JSF (à l'aide d'une <h:selectOneRadio>balise), vous pouvez faire ceci:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

où selectOneRadio ID est radiobutton_id et form ID est form_id .

Assurez-vous d'utiliser le nom à la place id , comme indiqué, car jQuery utilise cet attribut (le nom est généré automatiquement par JSF ressemblant à l'ID de contrôle).

Francisco Alvarado
la source
15

Vérifiez également si l'utilisateur ne sélectionne rien.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}
marque
la source
15

J'ai écrit un plugin jQuery pour définir et obtenir les valeurs des boutons radio. Il respecte également l'événement de "changement" sur eux.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Mettez le code n'importe où pour activer le complément. Alors profitez-en! Il remplace simplement la fonction val par défaut sans rien casser.

Vous pouvez visiter ce jsFiddle pour l'essayer en action et voir comment cela fonctionne.

Violon

Mathias Lykkegaard Lorenzen
la source
14

Si vous avez plusieurs boutons radio sous une seule forme,

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Cela fonctionne pour moi.

Ramesh
la source
12
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
Swadesh Bhattacharya
la source
12

Cela fonctionne bien

$('input[type="radio"][class="className"]:checked').val()

Démo de travail

Le :checkedsélecteur fonctionne pour checkboxes, radio buttonset sélectionner des éléments. Pour certains éléments uniquement, utilisez le :selectedsélecteur.

API pour :checked Selector

Manoj
la source
11

Pour obtenir la valeur de la radio sélectionnée qui utilise une classe:

$('.class:checked').val()
Rodrigo Dias
la source
10

J'utilise ce simple script

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
Lafif Astahdziq
la source
Utilisez l'événement click plutôt que l'événement change si vous voulez qu'il fonctionne dans tous les navigateurs
Matt Browne
10

Utilisez ceci:

value = $('input[name=button-name]:checked').val();
jeswin
la source
8

DÉMO : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>

Code Spy
la source
6

Si vous n'avez qu'un seul ensemble de boutons radio sur 1 formulaire, le code jQuery est aussi simple que ceci:

$( "input:checked" ).val()
Randy Greencorn
la source
5

J'ai publié une bibliothèque pour vous aider. Extrait toutes les valeurs d'entrée possibles, en fait, mais inclut également le bouton radio qui a été coché. Vous pouvez le vérifier sur https://github.com/mazondo/formalizedata

Cela vous donnera un objet js des réponses, donc un formulaire comme:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

te donnera:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}
Ryan
la source
4

Pour récupérer toutes les valeurs des boutons radio dans le tableau JavaScript, utilisez le code jQuery suivant:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();
Nilesh
la source
2
Les boutons radio ne sont pas les mêmes que les cases à cocher. Cet exemple utilise des cases à cocher.
Matt Browne
4

essayez-le

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);
Gautam Rai
la source
4

JQuery pour obtenir tous les boutons radio dans le formulaire et la valeur vérifiée.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});
Iyyappan Amirthalingam
la source
3

Une autre façon de l'obtenir:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>

Mehdi Bouzidi
la source
2
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});
JoshYates1980
la source
1

À partir de cette question , j'ai trouvé une autre façon d'accéder à l'élément actuellement sélectionné inputlorsque vous êtes dans un clickévénement pour son étiquette respective. La raison en est que le nouvel élément sélectionné inputn'est mis à jour qu'après son labelévénement de clic.

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

Patrick Roberts
la source
1

Ce que je devais faire était de simplifier le code C #, c'est-à-dire faire autant que possible dans le JavaScript frontal. J'utilise un conteneur fieldset parce que je travaille dans DNN et qu'il a sa propre forme. Je ne peux donc pas ajouter de formulaire.

Je dois tester quelle zone de texte sur 3 est utilisée et si c'est le cas, quel est le type de recherche? Commence par la valeur, contient la valeur, correspondance exacte de la valeur.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

Et mon JavaScript est:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Il suffit de dire que n'importe quelle balise contenant un ID peut être utilisée. Pour les DNNers, c'est bon à savoir. L'objectif final ici est de transmettre au code de niveau intermédiaire ce qui est nécessaire pour démarrer une recherche de pièces dans SQL Server.

De cette façon, je n'ai pas besoin de copier également le code C # précédent beaucoup plus compliqué. Le gros du travail se fait ici même.

J'ai dû chercher un peu pour cela, puis bricoler avec pour le faire fonctionner. Donc pour les autres DNN, j'espère que c'est facile à trouver.

user1585204
la source