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é?

2665
juan 27 févr. 2009 à 22:53

30 réponses

Meilleure réponse

Pour obtenir la valeur de l'élément sélectionné radioName d'un formulaire avec l'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>
3896
Kristijan Iliev 4 mai 2018 à 08:44

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

15
JGrinon 26 janv. 2014 à 10:58

J'utilise ce simple script

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
10
Lafif Astahdziq 19 oct. 2014 à 17:34

À partir de cette question, j'ai trouvé un autre moyen d'accéder à input actuellement sélectionné lorsque vous êtes dans un événement click pour son étiquette respective. La raison en est que le input nouvellement sélectionné n'est mis à jour qu'après l'événement de clic de son label.

TL; DR

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

  ...
});
$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});
input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>
1
Community 23 mai 2017 à 12:02

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

138
Cam Tullos 30 mars 2011 à 22:29

Utilisez ceci:

value = $('input[name=button-name]:checked').val();
10
atiquratik 20 janv. 2015 à 05:51

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

$('.class:checked').val()
11
Rodrigo Dias 11 janv. 2013 à 18:05
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
12
Tisho 17 juil. 2012 à 12:09

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()
6
Randy Greencorn 12 août 2013 à 02:13

DEMO : 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>
8
Mehdi Bouzidi 27 déc. 2017 à 08:26

Obtenez toutes les radios:

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

Filtrez pour obtenir celui qui est vérifié

radios.filter(":checked")
52
Alex V 17 avril 2015 à 17:47

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.

14
swiftBoy 7 juin 2012 à 11:56

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.

1
user1585204 4 sept. 2017 à 15:41

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());
});
3
Iyyappan Amirthalingam 7 nov. 2018 à 20:27

Utilisez ceci..

$("#myform input[type='radio']:checked").val();
405
Joberror 7 janv. 2010 à 00:45

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>
23
Olivier Pons 27 déc. 2017 à 08:06

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

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

Utilisez la fonction filter(), pas 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();

Notes: Cette réponse corrigeait à l'origine une autre réponse qui recommandait d'utiliser 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();
302
Daniel Marín 7 juin 2018 à 18:03

Dans un bouton radio généré par JSF (en utilisant la balise <h:selectOneRadio>), vous pouvez faire ceci:

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

Où selectOneRadio ID est radiobutton_id et l'ID de formulaire est form_id .

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

16
Francisco Alvarado 29 sept. 2010 à 19:06

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 ...

24
Darin Peterson 21 sept. 2012 à 16:19

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"
}
5
Milap 29 juin 2016 à 12:00

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>
3
Mehdi Bouzidi 3 oct. 2017 à 12:56

Cela fonctionne bien

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

Démo de travail

Le sélecteur :checked fonctionne pour les éléments checkboxes, radio buttons et select. Pour certains éléments uniquement, utilisez le sélecteur :selected.

API pour :checked Selector

12
Manoj 14 févr. 2015 à 11:41
$(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();
    });
  })
});
2
JoshYates1980 4 mai 2017 à 21:26

Une autre option est:

$('input[name=radioName]:checked').val()
47
RedDragon 22 août 2018 à 12:11

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

 $("form:radio:checked").val();
78
tvanfosson 24 avril 2012 à 15:57

Essayez-le

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

console.log(radioVal);
4
Gautam Rai 10 juil. 2017 à 12:21

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();
}
15
epascarello 15 nov. 2011 à 17:16

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

$("#Myradio").is(":checked")
55
Juan 30 août 2013 à 20:27
$("input:radio:checked").val();
30
Code Maverick 24 avril 2012 à 16:00

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();
4
Milap 29 juin 2016 à 12:00