Mam dwa przyciski radiowe i chcesz opublikować wartość wybranego. Jak mogę uzyskać wartość z jQuery?

Mogę jeździć w ten sposób:

$("form :radio")

Skąd mam wiedzieć, który jest wybrany?

2824
juan 27 luty 2009, 22:53

29 odpowiedzi

Najlepsza odpowiedź

Aby uzyskać wartość wybranej radioName elementu formularza z ID myForm:

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

Oto przykład:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>
4061
Kristijan Iliev 4 maj 2018, 08:44

Użyj tego..

$("#myform input[type='radio']:checked").val();
425
Joberror 7 styczeń 2010, 00:45

Jeśli masz już odniesienie do grupy przycisków radiowych, na przykład:

var myRadio = $("input[name=myRadio]");

Użyj funkcji filter(), a nie {x1}}. (find() służy do lokalizacji elementów dziecka / potomków, podczas gdy filter() Wyszukuje elementy najwyższego poziomu w wyborze.)

var checkedValue = myRadio.filter(":checked").val();

Uwagi: Ta odpowiedź pierwotnie poprawiła inną odpowiedź, która zalecana przy użyciu find(), która wydaje się mieć od tego czasu zmieniony. find() nadal może być przydatny dla sytuacji, w której już miałeś odniesienie do elementu kontenerowego, ale nie do przycisków radiowych, np.:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
316
Daniel Marín 7 czerwiec 2018, 18:03

To powinno działać:

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

Zwróć uwagę na "" Używane wokół wejścia: sprawdzone, a nie ", jak rozwiązanie Peter J

145
Cam Tullos 30 marzec 2011, 22:29

Możesz użyć selektora sprawdzonego wraz z selektorem radiowym.

 $("form:radio:checked").val();
81
tvanfosson 24 kwiecień 2012, 15:57

Jeśli chcesz tylko wartość boolowską, tj. Jeśli zostanie sprawdzone lub nie spróbuj tego:

$("#Myradio").is(":checked")
62
Juan 30 sierpień 2013, 20:27

Zdobądź wszystkie radia:

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

Filtr, aby uzyskać to, że to sprawdzone

radios.filter(":checked")
55
Alex V 17 kwiecień 2015, 17:47

Inną opcją jest:

$('input[name=radioName]:checked').val()
52
RedDragon 22 sierpień 2018, 12:11
$("input:radio:checked").val();
31
Code Maverick 24 kwiecień 2012, 16:00

W moim przypadku mam dwa przyciski radiowe w jednej formie i chciałem znać status każdego przycisku. Ten poniżej pracował dla mnie:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>
26
Olivier Pons 27 grudzień 2017, 08:06

Oto jak napisałbym formę i radzę sobie z uzyskaniem sprawdzonego radia.

Korzystanie z formy o nazwie myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Uzyskaj wartość z formularza:

$('#myForm .radio1:checked').val();

Jeśli nie publikujesz formularza, upraszczam go dalej, używając:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Następnie staje się sprawdzoną wartość:

    $('.radio1:checked').val();

Posiadanie nazwy klasy na wejściu pozwala mi łatwo stylować wejścia ...

25
Darin Peterson 21 wrzesień 2012, 16:19

W wygenerowanym przycisku jsf (za pomocą znacznika <h:selectOneRadio>), możesz to zrobić:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

Gdzie identyfikator SELECTERADIO jest radiobutton_id i identyfikator formularza jest form_id .

Pamiętaj, aby użyć nazwy zamiast tego ID , jak wskazano, ponieważ jQuery korzysta z tego atrybutu (nazwa jest generowana automatycznie przez ID sterowania JSF).

17
Francisco Alvarado 29 wrzesień 2010, 19:06

Sprawdź także, czy użytkownik niczego nie wybiera.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}
16
epascarello 15 listopad 2011, 17:16

Jeśli masz wiele przycisków radiowych w jednej formie

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

To działa dla mnie.

16
swiftBoy 7 czerwiec 2012, 11:56

Napisałem wtyczkę jQuery do ustawienia i uzyskania wartości przycisków radiowych. Szanuje również imprezę "Zmień" na nich.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Umieść kod wszędzie, aby włączyć Addin. Więc ciesz się! Po prostu zastępuje domyślną funkcję Val bez złamania niczego.

Możesz odwiedzić tę JSFiddle, aby spróbować w akcji i zobaczyć, jak działa.

Skrzypce

15
JGrinon 26 styczeń 2014, 10:58
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
13
Tisho 17 lipiec 2012, 12:09

To działa dobrze

$('input[type="radio"][class="className"]:checked').val()

Działające demo

Selektor :checked działa dla checkboxes, radio buttons i wybierz elementy. Aby tylko wybrać elementy, użyj selektora :selected.

API dla :checked Selector

12
Manoj 14 luty 2015, 11:41

Aby uzyskać wartość wybranego radia, który używa klasy:

$('.class:checked').val()
11
Rodrigo Dias 11 styczeń 2013, 18:05

Używam tego prostego skryptu

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
10
Lafif Astahdziq 19 październik 2014, 17:34

Użyj tego:

value = $('input[name=button-name]:checked').val();
10
atiquratik 20 styczeń 2015, 05:51

demo : https://jsfiddle.net/ipsjolly/XYGR065W/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>
8
Mehdi Bouzidi 27 grudzień 2017, 08:26

Jeśli masz tylko 1 zestaw przycisków radiowych na 1 formularzu, kod jQuery jest tak prosty, jak:

$( "input:checked" ).val()
6
Randy Greencorn 12 sierpień 2013, 02:13

Wydałem bibliotekę, aby w tym pomóc. Wyciąga wszystkie możliwe wartości wejściowe, właściwie, ale także obejmuje, który przycisk radiowy został sprawdzony. Możesz to sprawdzić w https://github.com/mazondo/Formalizedata

Daje ci przedmiot JS odpowiedzi, więc forma, jak:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

Da tobie:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}
5
Milap 29 czerwiec 2016, 12:00

JQUERY, aby uzyskać wszystkie przyciski radiowe w formie i sprawdzonej wartości.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});
5
Iyyappan Amirthalingam 7 listopad 2018, 20:27

Aby pobrać wszystkie wartości przycisków radiowych w tablicy JavaScript używają następującego kodu jQuery:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();
4
Milap 29 czerwiec 2016, 12:00

Innym sposobem na to:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
   <span><input type="radio" name="q12_3" value="1">1</span><br>
   <span><input type="radio" name="q12_3" value="2">2</span>
</form>
3
Mehdi Bouzidi 3 październik 2017, 12:56
$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});
2
JoshYates1980 4 maj 2017, 21:26

Z To pytanie, wymyśliłem alternatywny sposób na dostęp do aktualnie wybranego input, gdy jesteś wewnątrz wydarzenie click dla odpowiedniej etykiety. Powód, dla którego jest dlatego, że nowo wybrany input nie jest aktualizowany aż po wydarzeniu label.

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});
$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});
input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>
1
Community 23 maj 2017, 12:02

To, co musiałem zrobić, to uprościć kod C #, czyli jak najwięcej w przednim końcu JavaScript. Używam kontenera Feetet, ponieważ pracuję w DNN i ma własną formę. Więc nie mogę dodać formularza.

Muszę przetestować, który skrzynka tekstowa z 3 jest używana, a jeśli tak jest, jaki jest rodzaj wyszukiwania? Zaczyna się od wartości, zawiera wartość, dokładne dopasowanie wartości.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

A mój JavaScript jest:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Mówiąc, że można użyć dowolnej tagu zawierającego z identyfikatorem. Dla dnnerów dobrze jest wiedzieć. Cel końcowy tutaj jest przekazujący kod średnio poziomu, co jest potrzebne do rozpoczęcia wyszukiwania części w SQL Server.

W ten sposób nie muszę również kopiować znacznie bardziej skomplikowanego poprzedniego kodu C #. Ciężkie podnoszenie jest wykonywane tutaj.

Musiałem trochę na to wyglądać, a potem może z nim dostać do pracy. Dla innych dnnerów, miejmy nadzieję, że łatwo jest znaleźć.

1
user1585204 4 wrzesień 2017, 15:41