jQuery ottiene il valore del pulsante di opzione selezionato

L'affermazione del problema è semplice. Devo vedere se l'utente ha selezionato un pulsante di opzione da un gruppo di radio. Ogni pulsante di opzione nel gruppo condivide lo stesso ID.

Il problema è che non ho controllo su come viene generato il modulo. Ecco il codice di esempio di come appare un codice di controllo del pulsante di opzione:

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

Inoltre, quando si seleziona un pulsante di opzione, al controllo non viene aggiunto un attributo "controllato", ma solo il testo controllato (immagino solo la proprietà controllata senza un valore) . Di seguito è riportato l'aspetto di un radiocomando selezionato

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

Qualcuno può aiutarmi con il codice jQuery che può aiutarmi a ottenere il valore del pulsante di opzione selezionato?

Basta usare.

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

È così facile.

Innanzitutto, non puoi avere più elementi con lo stesso ID. So che hai detto che non puoi controllare come viene creato il modulo, ma ... prova a rimuovere in qualche modo tutti gli ID dalle radio o renderli unici.

Per ottenere il valore del pulsante di opzione selezionato, selezionarlo per nome con il :checkedfiltro.

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

MODIFICARE

Quindi non hai alcun controllo sui nomi. In tal caso, direi di inserire questi pulsanti di opzione all'interno di un div, denominato, dire radioDiv, quindi modificare leggermente il selettore:

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

Il modo più semplice per ottenere il valore del pulsante di opzione selezionato è il seguente:

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

Nessuno spazio deve essere utilizzato tra il selettore.

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

Assicurati di avvolgerlo nella funzione DOM ready ( $(function(){...});o $(document).ready(function(){...});).

1. Nel tuo codice, jQuery cerca solo la prima istanza di un input con nome q12_3, che in questo caso ha un valore di 1. Desideri un input con nome q12_3 che sia :checked.

$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});

2. Si noti che il codice sopra non è lo stesso dell'uso .is(":checked"). La is() funzione di jQuery restituisce un valore booleano (vero o falso) e non un elemento.

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

Questo restituirà il valore del pulsante di opzione verificato.

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

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

per attributi nidificati

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

Non dimenticare le parentesi graffe singole per nome

Ottieni tutte le radio:

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

Filtro per ottenere quello selezionato

radios.filter(":checked");

O

Un altro modo è possibile trovare il valore del pulsante di opzione

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

Per ottenere il valore del pulsante di opzione selezionato, utilizzare RadioButtonName e l'ID modulo contenente il pulsante di opzione.

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

O solo

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

Controlla l'esempio funziona bene

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

Vedi sotto per un esempio funzionante con una raccolta di gruppi radio ciascuno associato a sezioni diverse. Il tuo schema di denominazione è importante, ma idealmente dovresti provare a utilizzare uno schema di denominazione coerente per gli input (specialmente quando si trovano in sezioni come qui).

$('#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/>

Usa sotto il codice

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

Si noti che l'attributo value deve essere definito in modo da ottenere "Maschio" o "Femmina" nel risultato.

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

Prova questo con l'esempio

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

Solo per nome

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

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

È possibile ottenere il valore del pulsante di opzione selezionato tramite Id utilizzando questo in javascript / jQuery.

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

Spero che questo possa aiutare.

Il modo migliore per spiegare questo semplice argomento è dare un semplice esempio e un link di riferimento: -

Nel seguente esempio abbiamo due pulsanti di opzione. Se l'utente seleziona un pulsante di opzione, visualizzeremo il valore del pulsante di opzione selezionato in una casella di avviso.

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

So che mi unirò così tardi. Ma vale la pena ricordare che ci vuole

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

E poi ho controllato questo nel mio js. Potrebbe essere come

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

e gestire jquery per allerta come per il valore impostato / Modificato tramite ID div:

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

è così facile ....: -}

Un altro modo semplice per capire ... Funziona:

Codice 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

Codice Jquery:

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

il pulsante di opzione multi gruppo converte il valore in array

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

Non sono una persona javascript, ma ho trovato qui per cercare questo problema. Per chi lo google e lo trova qui, spero che questo aiuti alcuni. Quindi, come in questione se abbiamo un elenco di pulsanti di opzione:

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

Posso trovare quello selezionato con questo selettore:

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

Anche se non è stato selezionato alcun elemento, non visualizzo ancora un errore indefinito. Quindi, non devi scrivere un'istruzione if extra prima di prendere il valore dell'elemento.

Ecco un esempio molto semplice di jsfiddle .

Qui ci sono 2 pulsanti di opzione, ovvero RD1 e Radio1

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

Il modo più semplice per verificare quale pulsante di opzione è selezionato, controllando l'individuo è (": controllato") proprietà

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

Anche inputnon è necessario come suggerito da altre risposte. È inoltre possibile utilizzare il seguente codice:

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

Nel caso in cui non si conosca il nome specifico o si desideri controllare tutti gli ingressi radio in un modulo, è possibile utilizzare una var globale per verificare il valore di ciascun gruppo radio una sola volta: `

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