¿Cómo saber qué conmutador se selecciona usando jQuery?

Tengo dos interruptores y quieres publicar el valor seleccionado. ¿Cómo puedo obtener un valor usando jQuery?

Puedo conseguirlos todos así:

 $("form :radio") 

¿Cómo saber cuál está seleccionado?

2414
27 февр. fijado por juan el 27 de febrero 2009-02-27 22:53 '09 a las 10:53 AM 2009-02-27 22:53
@ 33 respuestas
  • 1
  • 2

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

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

Aquí hay un ejemplo:

 <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> 
3655
27 февр. La respuesta es dada por Peter J 27 de febrero. 2009-02-27 22:58 '09 a las 10:58 pm 2009-02-27 22:58

Utilízalo

border=0
 $("#myform input[type='radio']:checked").val(); 
382
07 янв. Se da la respuesta a Joberror 07 jan. 2010-01-07 03:45 '10 a las 3:45 am 2010-01-07 03:45

Si ya tiene un enlace a un grupo de conmutadores, por ejemplo:

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

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

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

Notas Esta respuesta corrigió originalmente otra respuesta que recomendaba usar find() , que parece haber sido modificada. find() aún puede ser útil para una situación en la que ya tiene una referencia al elemento contenedor, pero no a los switches, por ejemplo:

 var form = $("#mainForm"); ... var checkedValue = form.find("input[name=myRadio]:checked").val(); 
278
09 февр. Responder Matt Browne 09 Feb. 2011-02-09 21:25 '11 a las 21:25 2011-02-09 21:25

Esto debería funcionar:

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

Tenga en cuenta que "utilizado para la entrada: verificado, no" cómo ", como la solución Peter J

130
31 марта '11 в 1:29 2011-03-31 01:29 Cam Tullos da la respuesta el 31 de marzo de 2011 a la 1:29 2011-03-31 01:29

Puede utilizar el selector marcado con el selector de radio.

  $("form:radio:checked").val(); 
76
27 февр. La respuesta es dada por tvanfosson el 27 de febrero. 2009-02-27 23:00 '09 a las 23:00 2009-02-27 23:00

Obtener todas las estaciones de radio:

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

Filtrar para obtener el que estaba marcado.

 radios.filter(":checked") 
49
01 сент. La respuesta la da Alex V 01 sep. 2011-09-01 20:55 '11 a las 20:55 2011-09-01 20:55

Si solo desea un valor booleano, es decir, si está marcado o no intenta hacerlo:

 $("#Myradio").is(":checked") 
49
30 авг. La respuesta la da Juan el 30 de agosto. 2013-08-30 23:27 '13 a las 23:27 2013-08-30 23:27

Otra opción:

 $('input[name=radioName]:checked').val() 
43
21 сент. La respuesta es dada por RedDragon el 21 sep . 2011-09-21 22:35 '11 a las 10:35 pm 2011-09-21 22:35
 $("input:radio:checked").val(); 
30
16 окт. La respuesta es dada por Phillip Senn el 16 de octubre. 2010-10-16 23:20 '10 a las 23:20 2010-10-16 23:20

Aquí es cómo escribo el formulario y proceso el recibo de una radio verificada.

Usando el formulario 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 publicas el formulario, lo simplificaré usando:

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

Entonces obteniendo el valor verificado se convierte en:

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

Tener un nombre de clase en la entrada me permite crear entradas fácilmente ...

23
21 сент. La respuesta la da Darin Peterson el 21 sep. 2012-09-21 19:19 '12 a las 19:19 2012-09-21 19:19

En mi caso, tengo dos interruptores en una forma, y ​​quería saber el estado de cada botón. Esto me funcionó a continuación:

 <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> 
21
02 авг. la respuesta se da rmbianchi 02 ago. 2012-08-02 20:09 '12 a las 8:09 pm 2012-08-02 20:09

En el conmutador JSF generado (usando la <h:selectOneRadio> ) puede hacer esto:

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

donde selectOneRadio ID es radiobutton_id y form idid es form_id .

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

16
29 сент. La respuesta es dada a Francisco Alvarado el 29 sep. 2010-09-29 22:06 '10 a las 10:06 pm 2010-09-29 22:06

Escribí un complemento de jQuery para configurar y obtener los valores de los 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 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 disfrútalo! Simplemente anula la función val por defecto sin romper nada.

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

Feeddle

15
17 апр. Respuesta dada por Mathias Lykkegaard Lorenzen 17 de abril 2013-04-17 12:58 '13 a las 12:58 2013-04-17 12:58

También puedes ver si el usuario ha seleccionado algo.

 var radioanswer = 'none'; if ($('input[name=myRadio]:checked').val() != null) { radioanswer = $('input[name=myRadio]:checked').val(); } 
14
15 нояб. La respuesta se da Marcos 15 de noviembre. 2011-11-15 19:04 '11 a las 19:04 2011-11-15 19:04

Si tiene varios botones de radio en una forma, entonces

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

Funciona para mi

14
07 июня '12 в 7:45 2012-06-07 07:45 respuesta es dada a Ramesh el 7 de junio de 2012 a las 7:45 2012-06-07 07:45

Funciona genial

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

Demostración de trabajo

Selector :checked funciona para las checkboxes de checkboxes , radio buttons y selecciona los elementos. Solo para elementos seleccionados, use el selector :selected .

API para :checked Selector

12
14 февр. La respuesta la da Manoj el 14 de febrero. 2015-02-14 14:41 '15 a las 2:41 pm 2015-02-14 14:41

Para obtener el valor de la estación de radio seleccionada utilizando la clase:

 $('.class:checked').val() 
11
11 янв. Respuesta dada por Rodrigo Dias el 11 de enero. 2013-01-11 21:05 '13 a las 9:05 pm 2013-01-11 21:05
  $(".Stat").click(function () { var rdbVal1 = $("input[name$=S]:checked").val(); } 
11
17 июля '12 в 15:01 2012-07-17 15:01 Swadesh Bhattacharya da la respuesta el 17 de julio de '12 a las 15:01 2012-07-17 15:01

Yo uso este simple script.

 $('input[name="myRadio"]').on('change', function() { var radioValue = $('input[name="myRadio"]:checked').val(); alert(radioValue); }); 
9
19 окт. La respuesta la da Lafif Astahdziq el 19 de octubre. 2014-10-19 20:34 '14 a las 20:34 2014-10-19 20:34

Usa esto:

 value = $('input[name=button-name]:checked').val(); 
9
10 авг. la respuesta es dada por jeswin 10 ago. 2013-08-10 21:22 '13 a las 21:22 2013-08-10 21:22

DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

 <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> 
7
01 авг. La respuesta se da Code Spy 01 ago. 2017-08-01 09:09 '17 a las 9:09 2017-08-01 09:09

Si solo tiene 1 juego de interruptores en 1 formulario, el código jQuery es tan simple como esto:

 $( "input:checked" ).val() 
6
12 авг. Respuesta dada por Randy Greencorn 12 de agosto. 2013-08-12 05:13 '13 a las 5:13 2013-08-12 05:13

He lanzado una biblioteca para ayudar con esto. En realidad extrae todos los valores de entrada posibles, pero también incluye qué interruptor se probó. Puede consultar esto en https://github.com/mazondo/formalizedata

Esto le dará un objeto js-response, 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> 

le proporcionará con:

 $("form").formalizeData() { "favorite-color" : "blue" } 
5
23 янв. La respuesta es dada por Ryan 23 de enero 2014-01-23 09:40 '14 a las 9:40 2014-01-23 09:40

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

 var values = jQuery('input:checkbox:checked.group1').map(function () { return this.value; }).get(); 
4
03 сент. La respuesta se da Nilesh 03 Sep. 2013-09-03 06:25 '13 a las 6:25 am 2013-09-03 06:25

prueba

 var radioVal = $("#myform").find("input[type='radio']:checked").val(); console.log(radioVal); 
3
10 июля '17 в 15:21 2017-07-10 15:21 La respuesta es dada por Gautam Rai el 10 de julio de 2010 a las 15:21 2017-07-10 15:21

Otra forma de conseguirlo:

 <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
03 окт. respuesta dada por Mehdi Bouzidi 03 de octubre 2017-10-03 15:56 '17 a las 15:56 2017-10-03 15: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(); }); }) }); 
1
05 мая '17 в 0:26 2017-05-05 00:26 La respuesta es dada por JoshYates1980 5 de mayo de 2017 a las 0:26 2017-05-05 00:26

Lo que tenía que hacer era simplificar el código C #, que hace todo lo posible en la interfaz de JavaScript. Utilizo un contenedor de fieldset porque trabajo en DNN y tiene su propia forma. Por lo tanto, no puedo añadir un formulario.

Necesito verificar qué campo de texto de 3 se está utilizando y, de ser así, ¿qué tipo de búsqueda? Comienza con un valor, contiene un valor, valor de coincidencia exacta.

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:

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

Puede decir que puede usar cualquier etiqueta contenedora con un identificador. Para las DNNers es bueno saberlo. El objetivo final aquí es pasar al nivel intermedio de código necesario para comenzar a buscar detalles en SQL Server.

Por lo tanto, no necesito copiar el código C # anterior, mucho más complejo. El levantamiento de pesas se lleva a cabo aquí.

Tuve que trabajar un poco en esto y luego trabajar con él para que funcionara. Por lo tanto, para otros DNNers, espero que sea fácil de encontrar.

1
04 сент. la respuesta es dada por user1585204 en 04 sep . 2017-09-04 18:41 '17 a las 6:41 pm 2017-09-04 18:41

A partir de esta pregunta , se me ocurrió una forma alternativa de acceder a la input seleccionada actualmente cuando se encuentra en el evento de click para su etiqueta correspondiente. El motivo es que la input recién seleccionada no se actualiza hasta que ocurre el evento de label .

Tl; DR

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

 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; } 
1
15 янв. Respuesta dada por Patrick Roberts el 15 de enero. 2016-01-15 20:31 '16 a las 8:31 pm 2016-01-15 20:31

JQuery para obtener todos los interruptores en forma y valor verificado.

 $.each($("input[type='radio']").filter(":checked"), function () { console.log("Name:" + this.name); console.log("Value:" + $(this).val()); }); 
0
07 нояб. Respuesta dada por Iyyappan Amirthalingam 07 nov. 2018-11-07 23:27 '18 a las 11:27 p.m. 2018-11-07 23:27
  • 1
  • 2

Otras preguntas acerca de las etiquetas o Haz una pregunta