webentwicklung-frage-antwort-db.com.de

jQuery Wert des ausgewählten Optionsfelds abrufen

Die Problemstellung ist einfach. Ich muss sehen, ob der Benutzer ein Optionsfeld aus einer Optionsfeldgruppe 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. Der folgende Beispielcode zeigt, 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 >

Wenn ein Optionsfeld ausgewählt ist, wird dem Steuerelement nicht zusätzlich ein "angehakt" -Attribut hinzugefügt. Nur Text angehakt (Ich denke, nur die Eigenschaft wurde angehakt, ohne ein Wert) . Unten 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, mit dem ich den Wert eines aktivierten Optionsfelds ermitteln kann?

487
user1114212

Benutz einfach.

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

So einfach ist das.

958
Parveen Verma

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, alle IDs von den Funkgeräten zu entfernen oder sie eindeutig zu machen.

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

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

EDIT

Sie haben also keine Kontrolle über die Namen. In diesem Fall würde ich sagen, stecke diese Optionsfelder alle in ein div mit dem Namen "radioDiv" und ändere dann leicht deine Auswahl:

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

Der einfachste Weg, den Wert des ausgewählten Optionsfelds abzurufen, ist der folgende:

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

Es sollte kein Leerzeichen zwischen den Selektoren verwendet werden.

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

Stellen Sie sicher, dass die DOM-Ready-Funktion aktiviert ist ($(function(){...}); oder $(document).ready(function(){...});).

42
Purag
  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 eine Eingabe mit dem Namen q12_3, die :checked lautet.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Beachten Sie, dass der obige Code nicht mit der Verwendung von .is(":checked") identisch ist. Die Funktion is() von jQuery gibt einen Booleschen Wert (true oder false) und kein Element zurück.
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/>

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);
}
27
Sumith Harshan
 $("input[name='gender']:checked").val()

für verschachtelte Attribute

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

Vergessen Sie nicht einzelne Klammern für den Namen

21
user7516728

Holen Sie sich alle Radios:

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

Filtern Sie, um den zu erhalten, der überprüft wird

radios.filter(":checked");

ODER

Eine andere Möglichkeit, den Wert eines Optionsfelds zu ermitteln

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

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

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

ODER nur von

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

Ü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();
12
Rajnesh Thakur

Verwenden Sie den folgenden Code

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

Bitte beachten Sie, dass das Wertattribut definiert werden sollte, damit in Ihrem Ergebnis "Männlich" oder "Weiblich" angezeigt wird.

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

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

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

Versuchen Sie dies mit Beispiel

<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

Nur mit Namen

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

Dieses einfache Thema lässt sich am besten anhand eines einfachen Beispiels und eines Verweislinks erklären:

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>

abfrage: -

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

und behandle jquery für Alert wie für den eingestellten/durch div id geänderten Wert:

$("#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....:-}

3
Badal

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

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

Ich hoffe das wird helfen.

2
vishpatel73

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
2
ali alasady

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

HTML Code:

 <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

Abfragecode:

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

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, ist die Eigenschaft (": checked")

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

Ich bin kein Javascript-Benutzer, aber ich habe hier nach diesem Problem gesucht. 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 mit diesem Selektor herausfinden, welche ausgewählt wurden:

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

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

Hier ist sehr einfach jsfiddle Beispiel .

1
Yusuf Uzun

Falls Sie den spezifischen Namen nicht kennen oder alle Funkeingaben in einem Formular überprüfen möchten, können Sie mit einer globalen Variablen für jede Funkgruppe den Wert 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());
            }
        });`
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