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

j'ai deux boutons radio et voulez afficher la valeur de celle sélectionnée. Comment puis-je obtenir la valeur avec jQuery?

je peux obtenir tout d'eux comme ceci:

$("form :radio")

Comment savoir laquelle est sélectionnée?

2338
demandé sur Star 2009-02-27 22:53:27
la source

30 ответов

pour obtenir la valeur du sélectionné radioName élément 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>
3580
répondu Peter J 2018-05-04 11:44:30
la source

utilisez ceci..

$("#myform input[type='radio']:checked").val();
376
répondu Joberror 2010-01-07 03:45:35
la source

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

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

utiliser la fonction filter() et non find() . ( find() est pour localiser les éléments enfant/descendant, tandis que filter() recherche les éléments de haut niveau 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 changé depuis. find() pourrait encore être utile dans le cas où vous aviez déjà une référence à un élément de conteneur, mais pas aux boutons radio, par exemple:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
268
répondu Matt Browne 2018-06-07 21:03:38
la source

cela devrait fonctionner:

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

Note "" usaged autour de l'entrée:vérifié et pas " comme la Pierre J solution

124
répondu Cam Tullos 2011-03-31 02:29:39
la source

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

 $("form:radio:checked").val();
73
répondu tvanfosson 2012-04-24 19:57:22
la source

si vous voulez juste la valeur booléenne, i.e. si elle est cochée ou non essayez ceci:

$("#Myradio").is(":checked")
46
répondu Juan 2013-08-31 00:27:20
la source

Obtenir toutes les radios:

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

filtre pour obtenir celui qui est vérifié

radios.filter(":checked")
45
répondu Alex V 2015-04-17 20:47:24
la source

une autre option est:

$('input[name=radioName]:checked').val()
41
répondu RedDragon 2018-08-22 15:11:25
la source
$("input:radio:checked").val();
28
répondu Phillip Senn 2012-04-24 20:00:37
la source

Voici comment je vais écrire le formulaire et gérer l'obtention de la radio contrôlée.

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>

Obtenir la valeur de la forme:

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

si vous n'affichez pas le formulaire, je le simplifierais davantage en utilisant:

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

alors obtenir la valeur contrôlée devient:

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

Avoir un nom de classe sur l'entrée me permet facilement le style des entrées...

23
répondu Darin Peterson 2012-09-21 20:19:38
la source

Dans mon cas, j'ai deux boutons radio dans un formulaire et je voulais connaître l'état de chaque bouton. Ceci 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>
20
répondu rmbianchi 2017-12-27 11:06:34
la source

dans un JSF bouton radio généré (en utilisant <h:selectOneRadio> étiquette), vous pouvez faire ceci:

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

où l'ID selectOneRadio est radiobutton_id et l'ID du formulaire est form_id .

assurez - vous d'utiliser name au lieu de id , comme indiqué, car jQuery utilise cet attribut ( name est généré automatiquement par JSF ressemblant à control ID).

16
répondu Francisco Alvarado 2010-09-29 23:06:46
la source

j'ai écrit un plugin jQuery pour définir et obtenir des valeurs de boutons radio. Il respecte également l'événement "change" 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 l'addin. 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
répondu Mathias Lykkegaard Lorenzen 2014-01-26 14:58:23
la source

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();
}
14
répondu Mark 2011-11-15 21:16:12
la source

si vous avez plusieurs boutons radio sous une seule forme alors

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

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

ça marche pour moi.

14
répondu Ramesh 2012-06-07 15:56:12
la source

Cela fonctionne bien

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

"1519100920 De Travail" Démo

le sélecteur :checked fonctionne pour checkboxes , radio buttons , et sélectionnez des éléments. Pour sélectionner des éléments seulement, utilisez le sélecteur :selected .

API for :checked Selector

12
répondu Manoj 2015-02-14 14:41:37
la source
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
11
répondu Swadesh Bhattacharya 2012-07-17 16:09:01
la source

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

$('.class:checked').val()
11
répondu Rodrigo Dias 2013-01-11 22:05:37
la source

j'utilise ce script simple

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
9
répondu Lafif Astahdziq 2014-10-19 21:34:09
la source

utilisez ceci:

value = $('input[name=button-name]:checked').val();
9
répondu jeswin 2015-01-20 08:51:10
la source

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>
7
répondu Code Spy 2017-12-27 11:26:52
la source

si vous n'avez qu'un jeu de boutons radio sur un formulaire, le code jQuery est aussi simple que ceci:

$( "input:checked" ).val()
6
répondu Randy Greencorn 2013-08-12 06:13:15
la source

j'ai sorti une bibliothèque pour aider avec ça. Tire toutes les valeurs d'entrée possibles, en fait, mais inclut également quel bouton radio a été coché. Vous pouvez le vérifier à https://github.com/mazondo/formalizedata

ça 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>

vous donnera:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}
5
répondu Ryan 2016-06-29 15:00:17
la source

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

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();
4
répondu Nilesh 2016-06-29 15:00:39
la source

essayer

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

console.log(radioVal);
3
répondu Gautam Rai 2017-07-10 15:21:21
la source

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>
2
répondu Mehdi Bouzidi 2017-10-03 15:56:52
la source

à Partir de cette question , je suis venu avec un autre moyen pour accéder à la actuellement sélectionné input lorsque vous êtes dans un click événement de son étiquette respective. La raison en est que la nouvelle sélection input n'est pas mise à jour avant la fin de l'événement de clic 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
répondu Patrick Roberts 2017-05-23 15:02:54
la source
$(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();
    });
  })
});
1
répondu JoshYates1980 2017-05-05 00:26:41
la source

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 il a sa propre forme. Donc je ne peux 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 avec la valeur Contient la valeur 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() !== ''){

    }

le simple fait de dire n'importe quelle étiquette contenant avec un ID peut être utilisé. Pour les DNNers, c'est bon à savoir. Le but final ici est de passer au code de niveau moyen ce qui est nécessaire pour lancer une recherche de pièces dans SQL Server.

de cette façon, je n'ai pas à copier le code C# précédent beaucoup plus compliqué. Le gros du travail est fait ici.

j'ai dû chercher un peu pour cela et puis bricoler avec pour que ça marche. Donc pour les autres DNNers, j'espère que c'est facile à trouver.

1
répondu user1585204 2017-09-04 18:41:35
la source

vous avez besoin d'accès avec le sélecteur :checked :

Cochez cette doc:

exemple:

$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
	$('#val').text($('input[name=radioName]:checked', '#myForm').val());
});
#val {
  color: #EB0054;
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Radio value: <span id='val'><span></h3>
<form id="myForm">
  <input type="radio" name="radioName" value="a"> a <br>
  <input type="radio" name="radioName" value="b"> b <br>
  <input type="radio" name="radioName" value="c"> c <br>
</form>
0
répondu fitorec 2018-07-18 13:49:42
la source