web-dev-qa-db-fra.com

jQuery obtenir la valeur du bouton radio sélectionné

L'énoncé du problème est simple. J'ai besoin de voir si l'utilisateur a sélectionné un bouton radio dans un groupe de radio. Chaque bouton radio du groupe partage le même identifiant.

Le problème est que je ne contrôle pas la manière dont le formulaire est généré. Voici l'exemple de code montrant à quoi ressemble un code de contrôle de bouton radio:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

En plus de cela, quand un bouton radio est sélectionné, il n'ajoute pas d'attribut "vérifié" au contrôle juste du texte vérifié (je suppose que la propriété cochée sans une valeur) . Vous trouverez ci-dessous un aperçu du contrôle radio sélectionné.

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Quelqu'un peut-il m'aider avec un code jQuery qui peut m'aider à obtenir la valeur du bouton radio coché?

jqueryradio-buttonsiebel
487
user1114212

Il suffit d'utiliser.

$('input[name=name_of_your_radiobutton]:checked').val();

C'est si facile.

958
Parveen Verma

Tout d'abord, vous ne pouvez pas avoir plusieurs éléments avec le même identifiant. Je sais que vous avez dit que vous ne pouviez pas contrôler la manière dont le formulaire était créé, mais ... essayez de supprimer en quelque sorte tous les identifiants des radios ou rendez-les uniques.

Pour obtenir la valeur du bouton radio sélectionné, sélectionnez-le par son nom avec le filtre :checked.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDIT

Donc, vous n'avez aucun contrôle sur les noms. Dans ce cas, je dirais de placer ces boutons radio dans un div, nommé, par exemple, radioDiv, puis de modifier légèrement votre sélecteur:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
304
Adam Rackis

Le moyen le plus simple d'obtenir la valeur du bouton radio sélectionné est le suivant:

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

Aucun espace ne doit être utilisé entre les sélecteurs.

72
Hardik
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Assurez-vous de le placer dans la fonction DOM prêt ($(function(){...}); ou $(document).ready(function(){...});).

42
Purag
  1. Dans votre code, jQuery recherche simplement la première instance d'une entrée avec le nom q12_3, qui dans ce cas a la valeur 1. Vous voulez une entrée avec le nom q12_3 qui est :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Notez que le code ci-dessus n’est pas identique à l’utilisation de .is(":checked"). La fonction is() de jQuery renvoie un booléen (vrai ou faux) et non un élément.
36
Madhuka Dilhan
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Cela retournera, cochée la valeur du bouton radio.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}
27
Sumith Harshan
 $("input[name='gender']:checked").val()

pour les attributs imbriqués

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

N'oubliez pas les accolades simples pour le nom

21
user7516728

Obtenez toutes les radios:

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

Filtre pour obtenir celui qui est coché

radios.filter(":checked");

OU

Une autre façon de trouver la valeur du bouton radio

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
17
Faisal

Pour obtenir la valeur du bouton radio sélectionné, utilisez RadioButtonName et l'ID de formulaire contenant le RadioButton.

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

OU par seulement

$('form input[type=radio]:checked').val();
16
Nadir

Vérifiez l'exemple cela fonctionne bien

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();
12
Rajnesh Thakur

Utiliser le code ci-dessous

$('input[name=your_radio_button_name]:checked').val();

Veuillez noter que l'attribut value doit être défini de manière à obtenir "Male" ou "Female" dans votre résultat.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
11
anand

Voir ci-dessous des exemples de travail avec un ensemble de groupes de radio associés à différentes sections. Votre schéma de nommage est important, mais dans l’idéal, vous devriez de toute façon essayer d’utiliser un schéma de nommage cohérent pour les entrées (en particulier quand elles sont dans des sections comme ici).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>
10
MistyDawn

Essayez ceci avec exemple

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
6
saroj
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
6
Tadej Magajna

Par nom seulement

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
6
Arun Prasad E S

La meilleure façon d'expliquer ce sujet simple est de donner un exemple simple et un lien de référence: -

Dans l'exemple suivant, nous avons deux boutons radio. Si l'utilisateur sélectionne un bouton radio, nous afficherons la valeur du bouton radio sélectionné dans une zone d'alerte.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });
4
user4258100
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

et gérer jquery pour l'alerte comme pour la valeur définie/modifiée via div id:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

c'est très facile....:-}

3
Badal

Vous pouvez obtenir la valeur du bouton radio sélectionné par ID en l’utilisant en javascript/jQuery.

$("#InvCopyRadio:checked").val();

J'espère que cela aidera.

2
vishpatel73

valeur cachée du bouton radio multi-groupe à la matrice

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6
2
ali alasady

Un autre moyen facile de comprendre ... ça marche:

Code HTML:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Code Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
2
Vijay Deva

Voici 2 boutons radio à savoir rd1 et Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" />

Le moyen le plus simple de vérifier quel bouton radio est coché, en vérifiant que la propriété individuelle est (": vérifié")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
1
Mohan

Je ne suis pas une personne javascript, mais j'ai trouvé ici pour rechercher ce problème. Pour qui google et trouver ici, j'espère que cela aide certains. Donc, comme question si nous avons une liste de boutons radio:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Je peux trouver lequel a été sélectionné avec ce sélecteur:

$('.list input[type="radio"]:checked:first').val();

Même si aucun élément n'est sélectionné, je ne reçois toujours pas d'erreur non définie. Donc, vous n'avez pas besoin d'écrire d'instruction if supplémentaire avant de prendre la valeur de l'élément.

Voici très basique exemple jsfiddle .

1
Yusuf Uzun

Si vous ne connaissez pas le nom spécifique ou si vous souhaitez vérifier toutes les entrées radio d'un formulaire, vous pouvez utiliser une variable globale pour vérifier la valeur d'une seule fois pour chaque groupe de radio: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`
0
Steffen
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});
0
Md. Sohel Rana
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`
0
Sandeep Kumar