jQuery ruft den Wert des ausgewählten Optionsfelds ab

Die Problemstellung ist einfach. Ich muss sehen, ob der Benutzer ein Optionsfeld aus einer Optionsgruppe ausgewählt hat. Jedes Optionsfeld in der Gruppe hat dieselbe ID.

Das Problem ist, dass ich keine Kontrolle darüber habe, wie das Formular generiert wird. Hier ist der Beispielcode, wie ein Optionsfeld-Steuercode aussieht:

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

Zusätzlich dazu , wenn ein Optionsfeld ausgewählt ist es keine „geprüft“ Attribut an die Steuerung nur Text fügt geprüft (ich denke , gerade die Eigenschaft , ohne einen Wert geprüft) . Im Folgenden sehen Sie, wie eine ausgewählte Funksteuerung aussieht

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

Kann mir jemand mit jQuery-Code helfen, der mir helfen kann, den Wert des aktivierten Optionsfelds zu ermitteln?

Benutz einfach.

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

So einfach ist das.

Erstens können Sie nicht mehrere Elemente mit derselben ID haben. Ich weiß, dass Sie gesagt haben, Sie können nicht steuern, wie das Formular erstellt wird, aber ... versuchen Sie irgendwie, alle IDs aus den Radios zu entfernen oder sie eindeutig zu machen.

Um den Wert des ausgewählten Optionsfelds abzurufen, wählen Sie ihn mit dem :checkedFilter nach Namen aus .

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

BEARBEITEN

Sie haben also keine Kontrolle über die Namen. In diesem Fall würde ich sagen, setzen Sie diese Optionsfelder alle in ein div, das beispielsweise benannt ist, radioDivund ändern Sie dann Ihren Selektor leicht:

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

Der einfachste Weg, um den Wert des ausgewählten Optionsfelds zu erhalten, ist folgender:

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

Zwischen dem Selektor darf kein Leerzeichen verwendet werden.

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

Stellen Sie sicher, dass Sie dies in die DOM-Bereitschaftsfunktion ( $(function(){...});oder $(document).ready(function(){...});) einschließen .

1. In Ihrem Code sucht jQuery nur nach der ersten Instanz einer Eingabe mit dem Namen q12_3, die in diesem Fall den Wert 1 hat. Sie möchten also eine Eingabe mit dem Namen q12_3 :checked.

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

2. Beachten Sie, dass der obige Code nicht mit der Verwendung identisch ist .is(":checked"). Die is() Funktion von jQuery gibt einen Booleschen Wert (true oder false) und kein Element zurück.

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

Dies gibt den aktivierten Optionsfeldwert zurück.

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

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

für verschachtelte Attribute

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

Vergessen Sie nicht einzelne Klammern für den Namen

Holen Sie sich alle Radios:

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

Filtern Sie, um die überprüfte zu erhalten

radios.filter(":checked");

ODER

Auf andere Weise können Sie den Wert des Optionsfelds ermitteln

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

Verwenden Sie RadioButtonName und die Formular-ID, die den RadioButton enthält, um den Wert des ausgewählten Optionsfelds abzurufen.

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

ODER nur von

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

Überprüfen Sie das Beispiel, es funktioniert gut

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

Im Folgenden finden Sie ein Arbeitsbeispiel mit einer Sammlung von Funkgruppen, die jeweils unterschiedlichen Abschnitten zugeordnet sind. Ihr Namensschema ist wichtig, aber im Idealfall sollten Sie trotzdem versuchen, ein konsistentes Namensschema für Eingaben zu verwenden (insbesondere, wenn sie sich in Abschnitten wie hier befinden).

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

Verwenden Sie den folgenden Code

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

Bitte beachten Sie, dass das Wertattribut definiert werden sollte, damit Ihr Ergebnis "Männlich" oder "Weiblich" enthält.

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

Versuchen Sie dies anhand eines Beispiels

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

Nur nach Namen

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

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

Sie können den Wert des ausgewählten Optionsfelds anhand der ID in Javascript / jQuery abrufen.

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

Ich hoffe das wird helfen.

Der beste Weg, um dieses einfache Thema zu erklären, besteht darin, ein einfaches Beispiel und einen Referenzlink anzugeben: -

Im folgenden Beispiel haben wir zwei Optionsfelder. Wenn der Benutzer ein Optionsfeld auswählt, wird der ausgewählte Optionsfeldwert in einem Warnfeld angezeigt.

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

Ich weiß, dass ich so spät dazukomme. Aber es ist erwähnenswert, dass es braucht

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

Und dann habe ich das in meinem js überprüft. Es könnte so sein

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

und behandeln Sie jquery for alert wie für den Wert, der durch div id gesetzt / geändert wurde:

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

Es ist so einfach....:-}

Ein weiterer einfacher Weg zu verstehen ... Es funktioniert:

HTML Quelltext:

 <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

Jquery Code:

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

Optionsfeld für mehrere Gruppen verdeckter Wert für 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

Ich bin keine Javascript-Person, aber ich habe hier gefunden, um dieses Problem zu suchen. Für diejenigen, die es googeln und hier finden, hoffe ich, dass dies einigen hilft. Also, wie in Frage, wenn wir eine Liste von Optionsfeldern haben:

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

Ich kann finden, welche mit diesem Selektor ausgewählt wurde:

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

Auch wenn kein Element ausgewählt ist, wird immer noch kein undefinierter Fehler angezeigt. Sie müssen also keine zusätzliche if-Anweisung schreiben, bevor Sie den Wert des Elements übernehmen.

Hier ist ein sehr einfaches Beispiel für jsfiddle .

Hier sind 2 Optionsfelder, nämlich rd1 und Radio1

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

Der einfachste Weg, um zu überprüfen, welches Optionsfeld aktiviert ist, indem Sie eine einzelne Person überprüfen, ist die Eigenschaft (": checked")

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

Auch inputist nicht notwendig, wie in anderen Antworten vorgeschlagen. Der folgende Code kann ebenfalls verwendet werden:

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

Falls Sie den spezifischen Namen nicht kennen oder alle Funkeingänge in einem Formular überprüfen möchten, können Sie mit einer globalen Variable den Wert für jede Funkgruppe nur einmal überprüfen: `

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