jQuery pobierz wartość wybranego przycisku opcji

557

Opis problemu jest prosty. Muszę sprawdzić, czy użytkownik wybrał przycisk opcji z grupy. Każdy przycisk radiowy w grupie ma ten sam identyfikator.

Problem polega na tym, że nie mam kontroli nad sposobem generowania formularza. Oto przykładowy kod tego, jak wygląda kod kontrolny przycisku opcji:

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

Oprócz tego po wybraniu przycisku opcji nie dodaje on do kontrolki atrybutu „zaznaczone”, tylko zaznaczony tekst (chyba tylko sprawdzona właściwość bez wartości) . Poniżej pokazano, jak wygląda wybrane sterowanie radiowe

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

Czy ktoś może mi pomóc z kodem jQuery, który pomoże mi uzyskać wartość zaznaczonego przycisku opcji?

użytkownik1114212
źródło
71
Masz wiele elementów o tym samym identyfikatorze? To straszne.
Matt Ball
2
możliwy duplikat Jak mogę uzyskać radio wybrane przez jQuery?
Alex Angas,
Jak to działa, gdy wszyscy mają ten sam identyfikator? Czy podczas oceny według ID ocena nie kończy się na pierwszym dopasowanym elemencie? Do czego służą tutaj elementy dynamiczne wyświetlane w różnych momentach?
Mark Carpenter Jr
1
Do Twojej wiadomości, ASP.NET MVC @ Html.RadioButtonFut pomocnik wygeneruje wszystkie przyciski opcji o tym samym identyfikatorze. ups.
Triynko

Odpowiedzi:

1119

Po prostu użyj.

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

To takie proste.

Parveen Verma
źródło
25
Nie zapomnij znaków cudzysłowu: $ ("input [name = '" + fieldName + "']: zaznaczone"). Val ();
Atara,
4
@Guraprasad Rao: To jest właściwy kod - w tym przypadku cytaty nie są potrzebne. Wypróbuj i przekonaj się.
Stefan
2
Dlaczego to zwraca „on” zamiast wartości, którą określiłem w kodzie HTML? EDYCJA: Ponieważ nie miałem cytatów wokół moich wartości.
Vincent
3
$ ('input [name = "name_of_your_radiobutton"]: zaznaczono'). val ();
Sameera Prasad Jayasinghe
1
Zauważ, że jeśli żaden przycisk nie zostanie wybrany, to po prostu wróci null, co jest logiczne, ale czasami może cię pomylić, gdy przyzwyczaisz się widzieć ""jako wartość domyślną przez .val()połączenie.
Xji
313

Po pierwsze, nie możesz mieć wielu elementów o tym samym identyfikatorze. Wiem, że powiedziałeś, że nie możesz kontrolować sposobu tworzenia formularza, ale ... spróbuj w jakiś sposób usunąć wszystkie identyfikatory z radia lub uczynić je wyjątkowymi.

Aby uzyskać wartość wybranego przycisku opcji, wybierz go według nazwy z :checkedfiltrem.

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

EDYTOWAĆ

Więc nie masz kontroli nad nazwami. W takim przypadku powiedziałbym, aby umieścić wszystkie przyciski opcji w div, o nazwie powiedzmy radioDiv, a następnie nieznacznie zmodyfikować selektor:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
Adam Rackis
źródło
75

Najprostszym sposobem uzyskania wartości wybranego przycisku opcji jest:

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

Pomiędzy selektorem nie należy używać spacji.

Hardik
źródło
Jest to najprostsza opcja.
andreszs,
44
$("#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
        }
    });

Pamiętaj, aby owinąć to funkcją DOM ready ( $(function(){...});lub $(document).ready(function(){...});).

Purag
źródło
Zawsze otrzymuję pustą wartość z tym kodem. Wydaje mi się, że wynika to z faktu, że nie mam właściwości z wartością sprawdzoną tylko z zaznaczonym tekstem (nie jestem pewien, czy możemy uznać to za właściwość)
user1114212
Czy wybierasz przycisk opcji według jego identyfikatora? Czy zmieniłeś radioIDidentyfikator?
Purag
37
  1. W twoim kodzie jQuery po prostu szuka pierwszej instancji wejścia o nazwie q12_3, która w tym przypadku ma wartość 1. Chcesz wejścia o nazwie q12_3, to znaczy :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Zauważ, że powyższy kod nie jest tym samym, co używanie .is(":checked"). is() Funkcja jQuery zwraca wartość logiczną (prawda lub fałsz), a nie element.
Madhuka Dilhan
źródło
27
<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/>

Zwróci sprawdzoną wartość przycisku opcji.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}
Sumith Harshan
źródło
24
 $("input[name='gender']:checked").val()

dla zagnieżdżonych atrybutów

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

Nie zapomnij o pojedynczych nawiasach klamrowych dla nazwy


źródło
20

Uzyskaj wszystkie radia:

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

Filtruj, aby uzyskać ten, który jest zaznaczony

radios.filter(":checked");

LUB

Innym sposobem na znalezienie wartości przycisku opcji

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
Faisal
źródło
3
Używam, $('[name=your_inputs_names]:checked').val()ponieważ zawsze mają tę samą unikalną nazwę
vladkras
4
Dobre wykorzystanie.filter()
Mark Carpenter Jr
2
Że .filter(). Chciałbym, żeby ta odpowiedź była na górze.
Yusril Maulidan Raji
16

Aby uzyskać wartość wybranego przycisku opcji, użyj RadioButtonName i formularza zawierającego identyfikator RadioButton.

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

LUB tylko przez

$('form input[type=radio]:checked').val();
Nadir
źródło
12

Sprawdź przykład, który działa poprawnie

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

Rajnesh Thakur
źródło
12

Zobacz poniżej przykład roboczy z kolekcją grup radiowych powiązanych z różnymi sekcjami. Twój schemat nazewnictwa jest ważny, ale idealnie powinieneś spróbować użyć spójnego schematu nazewnictwa dla danych wejściowych (szczególnie, gdy są one w sekcjach takich jak tutaj).

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

MistyDawn
źródło
12

Użyj poniżej kodu

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

Pamiętaj, że atrybut wartości powinien być zdefiniowany, aby w wyniku mógł otrzymać „Mężczyzna” lub „Kobieta”.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
anand
źródło
7

Spróbuj tego z przykładem

<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>
Saroj
źródło
7

Tylko według nazwy

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
Arun Prasad ES
źródło
6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
Tadej Magajna
źródło
1
Po co zawracać sobie głowę porównywaniem łańcuchów, undefinedskoro wiadomo na pewno, że wartość musi być checked? W jQuery nie ma potrzeby.
Devin Burke
W pytaniu nie widzę żadnych informacji sugerujących, że jeden przycisk opcji będzie sprawdzany od samego początku. Mam na myśli, że tak jest w większości przypadków z przyciskami radiowymi. Tak więc w przypadku, gdy musielibyśmy to sprawdzić i żaden nie został wybrany, attr („zaznaczony”) zwróci obiekt zerowy.
Tadej Magajna,
Zgadza się, ale chciałem tylko powiedzieć, że zwracanie wartości null nie spowoduje błędu, więc porównanie z tym "undefined"jest niepotrzebne.
Devin Burke,
5

Możesz uzyskać wartość wybranego przycisku opcji przez Id, używając tego w javascript / jQuery.

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

Mam nadzieję, że to pomoże.

vishpatel73
źródło
bardzo wydajny !!
MHJ
4

Najlepszym sposobem wyjaśnienia tego prostego tematu jest podanie prostego przykładu i odnośnika: -

W poniższym przykładzie mamy dwa przyciski opcji. Jeśli użytkownik wybierze dowolny przycisk opcji, wyświetlimy wybraną wartość przycisku opcji w polu ostrzeżenia.

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());
        });
    });
Brad Larson
źródło
4

Wiem, że dołączam tak późno. Ale warto wspomnieć, że to trwa

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

A potem sprawdziłem to w moim js. To może być jak

$(document).ready(function () { 

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

`

Ashish
źródło
3
<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>

i obsługiwać jquery dla alertu jak dla wartości ustawionej / zmienionej przez 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());
            });

to takie proste....:-}

Badal
źródło
Prostszym sposobem wykonania tego przy użyciu identyfikatora nadrzędnego byłoby .... $ („# subskrypcje”). On („zmiana”, function () {var selection = $ (this) .find („input: selected”) .val (); alert (wybór);});
MistyDawn
3

Kolejny łatwy sposób na zrozumienie ... Działa:

Kod 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

Kod Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
Vijay Deva
źródło
3

przycisk grupowy ukrytej wartości radiowej do tablicy

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

Ali Aliasady
źródło
czy możesz dodać wyjaśnienie, aby więcej osób mogło to zrozumieć?
Shanteshwar Inde
2

Nie jestem javascript, ale znalazłem tutaj, aby przeszukać ten problem. Dla tego, kto google i tu znajdziesz, mam nadzieję, że to pomoże niektórym. Tak jak w przypadku pytania, jeśli mamy listę przycisków opcji:

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

Mogę znaleźć, który został wybrany za pomocą tego selektora:

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

Nawet jeśli nie wybrano żadnego elementu, nadal nie otrzymuję niezdefiniowanego błędu. Zatem nie musisz pisać dodatkowej instrukcji if przed pobraniem wartości elementu.

Oto bardzo prosty przykład jsfiddle .

Yusuf Uzun
źródło
1
Jest to nieprawidłowe użycie atrybutu name dla wejść radiowych. Przyciski opcji w grupie muszą mieć tę samą nazwę, jeśli chcesz zezwolić tylko na jedną wartość z grupy. Robiąc to w ten sposób, działa jak pola wyboru, pozwalając na wielokrotne zaznaczanie zamiast jednego zaznaczenia w grupie.
MistyDawn
@MistyDawn masz rację, nawet nie pamiętam, jak to napisałem, prawdopodobnie pochodzi od naprawienia błędu.
Yusuf Uzun
2

Oto 2 przyciski opcji, a mianowicie rd1 i Radio1

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

Najprostszym sposobem sprawdzenia, który przycisk opcji jest zaznaczony, jest sprawdzenie właściwości indywidualnej („: selected”)

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
Mohan
źródło
To nie jest bardzo solidne rozwiązanie. Lepiej po prostu mieć div zawierający, a następnie spójrz na wszystkie radia pod nim i wybierz zaznaczone. Możesz także spojrzeć na wszystkie radia o określonej nazwie, a następnie znaleźć sprawdzone. Ogranicza to konieczność zmiany kodu za każdym razem, gdy dodawany jest przycisk.
Richard Duerr
Jeśli strona ma więcej niż 2 wejścia radiowe, może to być BARDZO zagmatwane, a przypisanie identyfikatora do każdego radia byłoby bardzo czasochłonne. Ta metoda zwykle nie byłaby uważana za dobrą praktykę.
MistyDawn
2

Nawet inputnie jest konieczne, jak sugerują inne odpowiedzi. Można również użyć następującego kodu:

var variable_name = $("[name='radio_name']:checked").val();
shivamag00
źródło
Jest to zasadniczo to samo co ta odpowiedź sprzed pięciu lat, tylko bez inputi z niepotrzebnymi znakami cudzysłowu.
Heretic Monkey
Te cytaty nie są zbędne, dlatego opublikowałem powyższą odpowiedź, aby poinformować ludzi, że wkład nie jest konieczny
shivamag00
Następnie powinieneś rozważyć edycję pytania, aby wspomnieć o tych przyczynach, zamiast używania polecenia „Użyj następującego kodu”. Możesz odwołać się do źródła, które mówi, że cytaty są konieczne.
Heretic Monkey
@HereticMonkey Zakończ edycję ... Dzięki :)
shivamag00
1
    <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());
      });
    });`
Sandeep Kumar
źródło
1
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");
        }
    }
});
Pani Sohel Rana
źródło
1

Jeśli nie znasz osobnej nazwy lub chcesz sprawdzić wszystkie wejścia radiowe w formularzu, możesz użyć globalnego var, aby sprawdzić dla każdej grupy radiowej wartość tylko raz: `

        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());
            }
        });`
Steffen
źródło