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

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?

preguntado el 27 de febrero de 09 a las 17:02

30 Respuestas

Para obtener el valor de la seleccionado radioName elemento 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>

contestado el 04 de mayo de 18 a las 09:05

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]']: marcado - ceronueve

Solo notando, en el ejemplo del método onChange, también puede usar this.value en lugar de $ ('input [name = radioName]: comprobado', '#myForm'). Val () :) - edgar brady

Utilizar este..

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

Respondido el 07 de enero de 10 a las 00:01

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

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

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

Respondido el 07 de junio de 18 a las 19:06

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

respondido 30 mar '11, 23:03

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

 $("form:radio:checked").val();

Respondido 24 Abr '12, 16:04

Esto se ve bien, sin embargo, el 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. - Ninguna

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

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

Respondido 30 ago 13, 21:08

Obtén todas las radios:

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

Filtrar para obtener el que está marcado

radios.filter(":checked")

Respondido 17 Abr '15, 18:04

Otra opción es:

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

Respondido 22 ago 18, 13:08

La parte ": radio" no es necesaria aquí. - matt browne

$("input:radio:checked").val();

Respondido 24 Abr '12, 17:04

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>

Respondido el 27 de diciembre de 17 a las 08:12

¿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

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

Respondido el 21 de Septiembre de 12 a las 17:09

En una JSF botón de radio generado (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 ID del formulario es form_id.

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

Respondido el 29 de Septiembre de 10 a las 20:09

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

respondido 15 nov., 11: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í.

Respondido el 07 de junio de 12 a las 12:06

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

Respondido el 26 de enero de 14 a las 10:01

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

Respondido 17 Jul 12, 13:07

Esto funciona bien

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

Demo de trabajo

El sistema :checked el selector funciona para checkboxes, radio buttonsy seleccione elementos. Solo para elementos seleccionados, use el :selected selector.

API para :checked Selector

Respondido 14 Feb 15, 11:02

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

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

Respondido el 11 de enero de 13 a las 18:01

Yo uso este sencillo script

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

Respondido 19 Oct 14, 18:10

Utilice el evento de clic en lugar del evento de cambio si desea que funcione en todos los navegadores: matt browne

Utilizar esta:

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

Respondido el 20 de enero de 15 a las 05:01

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>

Respondido el 27 de diciembre de 17 a las 08:12

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

Respondido 12 ago 13, 03:08

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ó. Puedes comprobarlo 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"
}

Respondido el 29 de junio de 16 a las 13:06

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

respondido 07 nov., 18:20

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

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

Respondido el 29 de junio de 16 a las 13:06

Los botones de opción no son lo mismo que las casillas de verificación. Este ejemplo usa casillas de verificación. - matt browne

intentalo-

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

console.log(radioVal);

Respondido 10 Jul 17, 13:07

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>

Respondido 03 Oct 17, 13:10

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

contestado el 04 de mayo de 17 a las 22:05

Desde esta pregunta, Se me ocurrió una forma alternativa de acceder a los seleccionados actualmente input cuando estás dentro de un click evento para su respectiva etiqueta. La razón es porque el recién seleccionado input no se actualiza hasta después de su labelevento de clic.

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>

contestado el 23 de mayo de 17 a las 13:05

Lo que tenía que hacer era simplificar el código C #, es decir, hacer todo lo posible en el front-end de 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 los 3 se está utilizando y, de ser 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() !== ''){

    }

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

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

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

Respondido el 04 de Septiembre de 17 a las 16:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.