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 radio. Chaque bouton radio du groupe partage le même identifiant.

Le problème est que je n'ai aucun contrôle sur la façon dont le formulaire est généré. Voici un exemple de code sur l'apparence d'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 >

De plus, lorsqu'un bouton radio est sélectionné, il n'ajoute pas d'attribut "vérifié" au contrôle, juste le texte est coché (je suppose que la propriété vérifiée sans valeur) . Voici à quoi ressemble une radiocommande sélectionnée

<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 le code jQuery qui peut m'aider à obtenir la valeur du bouton radio coché?

Utilisez simplement.

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

C'est si simple.

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 pouvez pas contrôler la façon dont le formulaire est créé, mais ... essayez de supprimer en quelque sorte tous les identifiants des radios ou de les rendre uniques.

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

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

ÉDITER

Vous n'avez donc aucun contrôle sur les noms. Dans ce cas, je dirais de placer ces boutons radio dans une div, nommée, disons 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();
}

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.

$("#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 d'envelopper dans la fonction DOM ready ( $(function(){...});ou $(document).ready(function(){...});).

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 une valeur de 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());
    });
});

2. Notez que le code ci-dessus n'est pas identique à l'utilisation .is(":checked"). La is() fonction de jQuery renvoie un booléen (vrai ou faux) et non un élément.

<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 renverra la valeur du bouton radio cochée.

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

 $("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

Obtenez toutes les radios:

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

Filtrez pour obtenir celui qui est vérifié

radios.filter(":checked");

OU

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

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

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();

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();

Voir ci-dessous pour un exemple de travail avec une collection de groupes de radio associés chacun à différentes sections. Votre schéma de dénomination est important, mais dans l'idéal, vous devriez essayer d'utiliser un schéma de dénomination cohérent pour les entrées (surtout 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/>

Utiliser le code ci-dessous

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

Veuillez noter que l'attribut value doit être défini afin d'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>

Essayez ceci avec un 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>

Par nom uniquement

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

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

Vous pouvez obtenir la valeur du bouton radio sélectionné par Id en l'utilisant dans javascript / jQuery.

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

J'espère que cela vous aidera.

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 boîte 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());
        });
    });

Je sais que je rejoins cette fin. Mais il convient de mentionner qu'il faut

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

Et puis j'ai vérifié cela dans mon js. Ça pourrait être comme

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

"

<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é 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....:-}

Une autre façon simple 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);
});

valeur cachée du bouton radio multi-groupe sur le tableau

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

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 en 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 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 indéfinie. Ainsi, vous n'avez pas besoin d'écrire une instruction if supplémentaire avant de prendre la valeur de l'élément.

Voici un exemple très simple de jsfiddle .

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 cochant la propriété individuelle est (": vérifié")

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

Même inputn'est pas nécessaire comme suggéré par d'autres réponses. Le code suivant peut également être utilisé:

var variable_name = $("[name='radio_name']:checked").val();

    <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());
      });
    });`

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");
        }
    }
});

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

        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());
            }
        });`