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

2885

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?

4134

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

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

He aquí 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>
4
  • 7
    Solo voy a agregar esto porque podría ayudar a alguien. Si el nombre de la radio tiene corchetes como radioName [0] (a veces se usa en Wordpress), querrá usar comillas alrededor del nombre como input [name = 'radioName [0]']: marcadoZeroNine 21 dic.20 a las 5:07
  • Solo notando, en el ejemplo del método onChange, también puede usar this.value en lugar de $ ('input [name = radioName]: comprobado', '#myForm'). Val () :)Brady Edgar 25 feb a las 19:39
  • Para obtener una versión que no sea de jquery, consulte aquí: jsfiddle.net/2y76vp1etrinalbadger587 28 de marzo a las 5:54
  • @ ZeroNine, ese también es el caso en el marco Symfony que uso. Ali 19 de junio a las 7:41
443

Utilizar esta..

$("#myform input[type='radio']:checked").val();
0
327

Si ya tiene una referencia a un grupo de botones de opción, por ejemplo:

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

Utilice la filter()función, no find(). ( find()es para localizar 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 estaba corrigiendo otra respuesta que recomendaba usar find(), que parece haber sido cambiada 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();
0
152

Esto debería funcionar:

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

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

0
85

Puede utilizar el selector: marcado junto con el selector de radio.

 $("form:radio:checked").val();
1
  • 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 un compromiso entre legibilidad y rendimiento. Normalmente tomo la legibilidad sobre el rendimiento en asuntos tan triviales, pero en este caso creo que [type = radio] es en realidad más claro. Entonces, en este caso, se vería como $ ("formulario de entrada [tipo = radio]: comprobado"). Val (). Sin embargo, sigue siendo una respuesta válida. None 5 de diciembre de 2012 a las 1:54
69

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

$("#Myradio").is(":checked")
0
58

Obtén todas las radios:

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

Filtrar para obtener el que está marcado

radios.filter(":checked")
54

Otra opcion es:

$('input[name=radioName]:checked').val()
1
  • 8
    La parte ": radio" no es necesaria aquí. Matt Browne 31/01/15 a las 13:13
33
$("input:radio:checked").val();
27

En mi caso, tengo dos botones de opción en un formulario 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>
1
  • 1
    ¿A qué te refieres con el estado de cada botón? Los botones de radio con el mismo nombre permiten que solo se marque uno, por lo tanto, si obtiene el que está marcado, el resto está desmarcado. Rafael Herscovici 3 oct '14 a las 11:02
26

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 verificado se convierte en:

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

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

0
18

En un botón de radio generado por 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 el formulario ID es form_id .

Asegúrese de usar name en lugar de id , como se indica, porque jQuery usa este atributo (el nombre es generado automáticamente por JSF que se asemeja a la ID de control).

17

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

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

Si tiene varios botones de opción en una sola forma, 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í.

16

Escribí un complemento de jQuery para configurar y obtener valores de botones 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);

Coloque 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

14
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
0
14

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

0
12

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

$('.class:checked').val()
11

Yo uso este sencillo script

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});
1
  • Utilice el evento de clic en lugar del evento de cambio si desea que funcione en todos los navegadoresMatt Browne 31/01/15 a las 13:22
10

Utilizar esta:

value = $('input[name=button-name]:checked').val();
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>
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()
5

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

Le dará un objeto js de las respuestas, por lo 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"
}
5

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

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});
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();
1
  • 2
    Los botones de opción no son lo mismo que las casillas de verificación. Este ejemplo usa casillas de verificación. Matt Browne 31/01/15 a las 13:20
4

intentalo-

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

console.log(radioVal);
3

Otra forma de conseguirlo:

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

Tratar

myForm.myOption.value

function check() {
  console.log( myForm.myOption.value );
}
<form id="myForm">
  <input type="radio" name="myOption" value="1"> 1 <br>
  <input type="radio" name="myOption" value="2"> 2 <br>
  <input type="radio" name="myOption" value="3"> 3 <br>
</form>
<button onclick="check()">check</button>
2

prueba este. funcionó para mi

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