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?

2824
juan 27 feb. 2009 a las 22:53

30 respuestas

La mejor respuesta

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

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

Este es 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>
3896
Kristijan Iliev 4 may. 2018 a las 08:44

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 predeterminada de val sin romper nada.

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

Violín

15
JGrinon 26 ene. 2014 a las 10:58

Yo uso este simple script

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

Desde esta pregunta, se me ocurrió una forma alternativa de acceder al input seleccionado actualmente cuando estás dentro un evento click para su etiqueta respectiva. La razón es porque el input recién seleccionado no se actualiza hasta después del evento de clic de 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 may. 2017 a las 12:02

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

138
Cam Tullos 30 mar. 2011 a las 22:29

Utilice esto:

value = $('input[name=button-name]:checked').val();
10
atiquratik 20 ene. 2015 a las 05:51

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

$('.class:checked').val()
11
Rodrigo Dias 11 ene. 2013 a las 18:05
 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }
12
Tisho 17 jul. 2012 a las 12:09

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()
6
Randy Greencorn 12 ago. 2013 a las 02:13

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 dic. 2017 a las 08:26

Obtén todas las radios:

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

Filtro para obtener la que está marcada

radios.filter(":checked")
52
Alex V 17 abr. 2015 a las 17:47

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

14
swiftBoy 7 jun. 2012 a las 11:56

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.

1
user1585204 4 sep. 2017 a las 15:41

JQuery para obtener todos los botones de radio en el formulario y el valor marcado.

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

Utilizar este..

$("#myform input[type='radio']:checked").val();
405
Joberror 7 ene. 2010 a las 00:45

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>
23
Olivier Pons 27 dic. 2017 a las 08:06

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

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

Use la función filter(), 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 recomendaba 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 radio, por ejemplo:

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

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

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

Donde selectOneRadio ID es radiobutton_id y el ID de formulario es form_id .

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

16
Francisco Alvarado 29 sep. 2010 a las 19:06

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

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

24
Darin Peterson 21 sep. 2012 a las 16:19

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

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
Milap 29 jun. 2016 a las 12:00

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>
3
Mehdi Bouzidi 3 oct. 2017 a las 12:56

Esto funciona bien

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

Demo de trabajo

El selector :checked funciona para checkboxes, radio buttons y elementos seleccionados. Solo para elementos seleccionados, use el selector :selected.

API para :checked Selector

12
Manoj 14 feb. 2015 a las 11:41
$(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 may. 2017 a las 21:26

Otra opción es:

$('input[name=radioName]:checked').val()
47
RedDragon 22 ago. 2018 a las 12:11

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

 $("form:radio:checked").val();
78
tvanfosson 24 abr. 2012 a las 15:57

Intentalo-

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

console.log(radioVal);
4
Gautam Rai 10 jul. 2017 a las 12:21

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();
}
15
epascarello 15 nov. 2011 a las 17:16

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

$("#Myradio").is(":checked")
55
Juan 30 ago. 2013 a las 20:27
$("input:radio:checked").val();
30
Code Maverick 24 abr. 2012 a las 16:00

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();
4
Milap 29 jun. 2016 a las 12:00