¿Cómo puedo saber qué botón de radio está seleccionado a través de jQuery?

2707

Tengo dos botones de opción y quiero publicar el valor del seleccionado. ¿Cómo puedo obtener el valor con jQuery?

Puedo conseguirlos todos así:

$("form :radio")

¿Cómo sé cuál está seleccionado?

juan
fuente

Respuestas:

3936

Para obtener el valor del elemento seleccionado radioName de un formulario con id myForm:

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

Aquí hay un ejemplo:

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

Peter J
fuente
306
Terminé usando esto: $ ('entrada de formulario [tipo = radio]: marcado')
juan
46
@ PeterJ: ¿Por qué usaste dos argumentos en lugar de simplemente '#myform input[name=radioName]:checked'?
Sophie Alpert
145
jQuery funciona mejor cuando tiene un alcance correcto, y la selección por ID es siempre el selector de mayor rendimiento. El método de dos argumentos es simplemente otra forma de hacerlo.
Peter J
40
Para un mejor rendimiento, la documentación recomienda no usar el: selector de radio. api.jquery.com/radio-selector
Peter J
2
Alternativo: $ ('. ClassName: marcado');
Meetai.com
410

Utilizar este..

$("#myform input[type='radio']:checked").val();
Joberror
fuente
64
Si su formulario tiene varios conjuntos de botones de opción, creo que solo obtendrá el valor del primer conjunto.
Brad
3
Esto solo devolverá el valor del primer botón de opción que esté marcado en el formulario. Debería hacerse como sugirió Peter J.
MickJ
3
@MickJ Este fragmento de código es el mismo que el de Peter J ... Considerando el caso de uso de la pregunta original. Sin embargo, si tiene varios grupos de botones de opción, no funcionará. Por eso es mejor usar [name = selector]
Lyth
1
Como mencionó @Brad, esto solo obtendrá el valor del primer conjunto. Lo que desea es reemplazar ".val ()" con ".map (function () {return this.value;}). Get ();"
am_
1
Por lo que vale, (sí, sé optimizar antes de lo necesario, bla, bla), pero para un rendimiento puro, esto funciona más rápido, especialmente en navegadores antiguos:$("#myform").find("input[type='radio']:checked").val();
Mark Schultheiss
307

Si ya tiene una referencia a un grupo de botones de radio, por ejemplo:

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

Usa la filter()función, no find(). ( find()es para ubicar elementos secundarios / descendientes, mientras que filter()busca elementos de nivel superior en su selección).

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

Notas: Esta respuesta originalmente corrigió otra respuesta que recomendó usar find(), que parece haber cambiado desde entonces. find()aún podría ser útil para la situación en la que ya tenía una referencia a un elemento contenedor, pero no a los botones de opción, por ejemplo:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();
Matt Browne
fuente
77
Solo quería agregar, en aras de la claridad, que find () realmente busca todos los elementos descendientes (que coinciden con el selector dado). Si solo desea hijos directos, use children ().
Matt Browne el
139

Esto debería funcionar:

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

Tenga en cuenta el "" utilizado alrededor de la entrada: marcado y no '' como la solución de Peter J

Cam Tullos
fuente
Esta debería ser la respuesta seleccionada. el nombre es una forma muy agradable de realizar un seguimiento de los botones de radio
1919
79

Puede usar el: selector seleccionado junto con el selector de radio.

 $("form:radio:checked").val();
tvanfosson
fuente
13
Esto se ve bien, sin embargo, la documentación de jQuery recomienda usar [type = radio] en lugar de: radio para un mejor rendimiento. Es una compensación entre legibilidad y rendimiento. Normalmente considero legibilidad sobre el rendimiento en asuntos tan triviales, pero en este caso creo que [type = radio] es realmente más claro. Entonces, en este caso, se vería como $ ("formulario de entrada [tipo = radio]: marcado"). Val (). Sin embargo, sigue siendo una respuesta válida.
Ninguno
57

Si solo desea el valor booleano, es decir, si está marcado o no, intente esto:

$("#Myradio").is(":checked")
Juan
fuente
53

Obtén todas las radios:

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

Filtra para obtener el que está marcado

radios.filter(":checked")
Alex V
fuente
48

Otra opción es:

$('input[name=radioName]:checked').val()
Dragón rojo
fuente
66
La parte ": radio" no es necesaria aquí.
Matt Browne el
31
$("input:radio:checked").val();
Phillip Senn
fuente
25

Así es como escribiría el formulario y manejaría la obtención de la radio marcada.

Usando un formulario llamado myForm:

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

Obtenga el valor del formulario:

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

Si no está publicando el formulario, lo simplificaría aún más usando:

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

Luego, obtener el valor marcado se convierte en:

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

Tener un nombre de clase en la entrada me permite diseñar fácilmente las entradas ...

Darin Peterson
fuente
24

En mi caso, tengo dos botones de radio en una forma y quería saber el estado de cada botón. Esto a continuación funcionó para mí:

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

rmbianchi
fuente
1
¿A qué te refieres con el estado de cada botón? los botones de radio con el mismo nombre permiten que solo se verifique uno, por lo tanto, si obtiene el marcado, el resto no está marcado.
Demenciador
17

En un botón de radio generado JSF (usando <h:selectOneRadio>etiqueta), puede hacer esto:

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

donde selectOneRadio ID es radiobutton_id y form ID es form_id .

Asegúrese de usar name en lugar de id , como se indica, porque jQuery usa este atributo ( JSF genera automáticamente el nombre que se parece al ID de control).

Francisco Alvarado
fuente
15

Además, verifique si el usuario no selecciona nada.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}
marca
fuente
15

Escribí un complemento jQuery para configurar y obtener valores de botón de radio. También respeta el evento de "cambio" en ellos.

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

Ponga el código en cualquier lugar para habilitar el complemento. Entonces disfruta! Simplemente anula la función val predeterminada sin romper nada.

Puede visitar este jsFiddle para probarlo en acción y ver cómo funciona.

Violín

Mathias Lykkegaard Lorenzen
fuente
14

Si tiene varios botones de opción en forma única, entonces

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

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

Esto es trabajo para mí.

Ramesh
fuente
12
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
Swadesh Bhattacharya
fuente
12

Esto funciona bien

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

Demo de trabajo

El :checkedselector funciona para checkboxes, radio buttonsy seleccionar elementos. Solo para elementos seleccionados, use el :selectedselector.

API para :checked Selector

Manoj
fuente
11

Para obtener el valor de la radio seleccionada que usa una clase:

$('.class:checked').val()
Rodrigo Dias
fuente
10

Yo uso este simple script

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
Lafif Astahdziq
fuente
Use el evento de clic en lugar del evento de cambio si desea que funcione en todos los navegadores
Matt Browne
10

Utilizar este:

value = $('input[name=button-name]:checked').val();
jeswin
fuente
8

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>

Code Spy
fuente
6

Si solo tiene 1 conjunto de botones de opción en 1 formulario, el código jQuery es tan simple como esto:

$( "input:checked" ).val()
Randy Greencorn
fuente
5

He lanzado una biblioteca para ayudar con esto. Extrae todos los valores de entrada posibles, en realidad, pero también incluye qué botón de radio se verificó. Puede consultarlo en https://github.com/mazondo/formalizedata

Te dará un objeto js de las respuestas, así que una forma como:

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

Te regalaré:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}
Ryan
fuente
4

Para recuperar todos los valores de los botones de radio en la matriz de JavaScript, use el siguiente código jQuery:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();
Nilesh
fuente
2
Los botones de radio no son lo mismo que las casillas de verificación. Este ejemplo usa casillas de verificación.
Matt Browne
4

intentalo-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);
Gautam Rai
fuente
4

JQuery para obtener todos los botones de opción en el formulario y el valor marcado.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});
Iyyappan Amirthalingam
fuente
3

Otra forma de obtenerlo:

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

Mehdi Bouzidi
fuente
2
$(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();
    });
  })
});
JoshYates1980
fuente
1

A partir de esta pregunta , se me ocurrió una forma alternativa de acceder al seleccionado actualmente inputcuando estás dentro de un clickevento para su etiqueta respectiva. La razón es porque el recién seleccionado inputno se actualiza hasta después del labelevento de clic.

TL; DR

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

  ...
});

Patrick Roberts
fuente
1

Lo que tenía que hacer era simplificar el código C #, es decir, hacer todo lo posible en el front-end JavaScript. Estoy usando un contenedor de conjunto de campos porque estoy trabajando en DNN y tiene su propia forma. Entonces no puedo agregar un formulario.

Necesito probar qué cuadro de texto de 3 se está utilizando y, si es así, ¿cuál es el tipo de búsqueda? Comienza con el valor, Contiene el valor, Coincidencia exacta del valor.

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>

Y mi JavaScript es:

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

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

    }

Solo digo que se puede usar cualquier etiqueta que contenga una ID. Para DNNers, es bueno saberlo. El objetivo final aquí es pasar al código de nivel medio lo que se necesita para comenzar una búsqueda de piezas en SQL Server.

De esta manera, no tengo que copiar el código C # anterior mucho más complicado también. El trabajo pesado se está haciendo aquí mismo.

Tuve que buscar un poco para esto y luego jugar con él para que funcione. Entonces, para otros DNNers, espero que sea fácil de encontrar.

usuario1585204
fuente