jQuery obtiene el valor del botón de radio seleccionado

557

La declaración del problema es simple. Necesito ver si el usuario ha seleccionado un botón de radio de un grupo de radio. Todos los botones de radio del grupo comparten la misma identificación.

El problema es que no tengo control sobre cómo se genera el formulario. Aquí está el código de muestra de cómo se ve un código de control de botón de radio:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Además de esto, cuando se selecciona un botón de opción, no agrega un atributo "verificado" al control solo texto verificado (supongo que solo la propiedad verificada sin un valor) . A continuación se muestra cómo se ve un radio control seleccionado

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

¿Alguien puede ayudarme con el código jQuery que puede ayudarme a obtener el valor del botón de radio marcado?

usuario1114212
fuente
71
¿Tienes varios elementos con la misma ID? Eso es terrible.
Matt Ball
¿Cómo funciona eso con todos ellos con la misma identificación? Al evaluar por ID, ¿no se detiene la evaluación en el primer elemento coincidente? ¿Cuál es el propósito aquí son elementos dinámicos que se muestran en diferentes momentos?
Mark Carpenter Jr
1
FYI, ASP.NET MVC's @ Html.RadioButtonFor helper generará todos los botones de radio con la misma identificación. ¡Uy!
Triynko

Respuestas:

1120

Solo usa.

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

Tan fácil que es.

Parveen Verma
fuente
25
No olvide los signos de comillas: $ ("input [name = '" + fieldName + "']: marcado"). Val ();
Atara
44
@Guraprasad Rao: es el código correcto; las comillas no son necesarias en este caso. Pruébalo y verás.
Stefan
2
¿Por qué esto devuelve "on" en lugar del valor que he especificado en el HTML? EDITAR: porque no tenía citas sobre mis valores.
Vincent
3
$ ('input [name = "name_of_your_radiobutton"]: marcado'). val ();
Sameera Prasad Jayasinghe
1
Tenga en cuenta que si no se selecciona ningún botón, esto solo regresará null, lo cual es lógico pero a veces puede confundirlo cuando está acostumbrado a ver ""el valor predeterminado a través de la .val()llamada.
xji
313

Primero, no puede tener múltiples elementos con la misma identificación. Sé que dijiste que no puedes controlar cómo se crea el formulario, pero ... intenta de alguna manera eliminar todos los identificadores de las radios, o hacerlos únicos.

Para obtener el valor del botón de opción seleccionado, selecciónelo por nombre con el :checkedfiltro.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

EDITAR

Entonces no tienes control sobre los nombres. En ese caso, diría que coloque estos botones de radio dentro de un div, llamado, digamos, radioDivy luego modifique ligeramente su selector:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}
Adam Rackis
fuente
75

La manera más simple de obtener el valor del botón de opción seleccionado es la siguiente:

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

No se debe usar espacio entre el selector.

Hardik
fuente
La opción más sencilla, esta es.
andreszs
44
$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Asegúrese de ajustar esto en la función DOM listo ( $(function(){...});o $(document).ready(function(){...});).

Purag
fuente
Siempre obtengo un valor en blanco con este código. Supongo que esto se debe al hecho de que no tengo una propiedad con valor verificado, solo un texto verificado (no estoy seguro de si podemos considerarla una propiedad)
user1114212
¿Estás seleccionando el botón de opción por su ID? ¿Cambiaste radioIDa su ID?
Purag
37
  1. En su código, jQuery solo busca la primera instancia de una entrada con el nombre q12_3, que en este caso tiene un valor de 1. Desea una entrada con el nombre q12_3 :checked.
$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});
  1. Tenga en cuenta que el código anterior no es lo mismo que usar .is(":checked"). La is() función de jQuery devuelve un valor booleano (verdadero o falso) y no un elemento.
Madhuka Dilhan
fuente
28
<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Esto devolverá el valor del botón de radio verificado.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}
Sumith Harshan
fuente
24
 $("input[name='gender']:checked").val()

para atributos anidados

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

No olvides llaves simples para el nombre


fuente
20

Obtén todas las radios:

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

Filtra para obtener el que está marcado

radios.filter(":checked");

O

Otra forma de encontrar el valor del botón de radio

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();
Faisal
fuente
3
Yo uso $('[name=your_inputs_names]:checked').val()porque siempre tienen el mismo nombre único
vladkras
44
Buen uso de.filter()
Mark Carpenter Jr
2
Eso .filter(). Deseo que esta respuesta pueda estar en la parte superior.
Yusril Maulidan Raji
16

Para obtener el valor del botón de radio seleccionado, use RadioButtonName y la identificación del formulario que contiene el RadioButton.

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

O solo

$('form input[type=radio]:checked').val();
Nadir
fuente
12

Mira el ejemplo, funciona bien

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

Rajnesh Thakur
fuente
12

Vea a continuación un ejemplo de trabajo con una colección de grupos de radio cada uno asociado con diferentes secciones. Su esquema de nomenclatura es importante, pero idealmente debería intentar usar un esquema de nomenclatura consistente para las entradas de todos modos (especialmente cuando están en secciones como aquí).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}
* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

MistyDawn
fuente
12

Usar debajo del código

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

Tenga en cuenta que el atributo de valor debe definirse para que pueda obtener "Masculino" o "Femenino" en su resultado.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>
anand
fuente
7

Prueba esto con el ejemplo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>
saroj
fuente
7

Solo por nombre

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});
Arun Prasad ES
fuente
6
if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something
Tadej Magajna
fuente
1
¿Por qué molestarse en hacer la comparación de cadenas undefinedcuando se sabe con certeza que debe ser el valor checked? No hay necesidad en jQuery.
Devin Burke
En la pregunta no veo ninguna información que sugiera que se marque un botón de radio desde el principio. Quiero decir que es así en la mayoría de los casos con botones de radio. Entonces, en el caso de que tengamos que verificar eso y no se haya seleccionado ninguno, attr ("verificado") devolvería un objeto nulo.
Tadej Magajna
Correcto, pero solo quise decir que devolver nulo no causaría un error, por lo que la comparación "undefined"es innecesaria.
Devin Burke
5

Puede obtener el valor del botón de opción seleccionado por Id usando esto en javascript / jQuery.

$("#InvCopyRadio:checked").val();

Espero que esto sea de ayuda.

vishpatel73
fuente
muy eficiente !!
MHJ
4

La mejor manera de explicar este tema simple es dando un ejemplo simple y un enlace de referencia:

En el siguiente ejemplo tenemos dos botones de radio. Si el usuario selecciona cualquier botón de radio, mostraremos el valor del botón de radio seleccionado en un cuadro de alerta.

HTML:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });
Brad Larson
fuente
4

Sé que me uniré tan tarde. Pero vale la pena mencionar que se necesita

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

Y luego revisé esto en mi js. Podría ser como

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

``

Ashish
fuente
3
<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

y maneje jquery para la alerta como para el valor establecido / cambiado a través de la identificación div:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

es demasiado fácil....:-}

Badal
fuente
Una forma más simple de hacer esto usando la identificación principal sería ... $ ("# suscripciones"). On ("change", function () {var selection = $ (this) .find ("input: check") .val (); alerta (selección);});
MistyDawn
3

Otra manera fácil de entender ... está funcionando:

Código HTML:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Código Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});
Vijay Deva
fuente
3

valor encubierto de botón de radio de grupo múltiple para matriz

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

Ali Alasady
fuente
¿podría por favor agregar alguna explicación para que más personas puedan entender?
Shanteshwar Inde
2

No soy una persona de JavaScript, pero encontré aquí para buscar este problema. Para quien lo busque en Google y encuentre aquí, espero que esto ayude un poco. Entonces, como en cuestión si tenemos una lista de botones de radio:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Puedo encontrar cuál seleccionó con este selector:

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

Incluso si no hay ningún elemento seleccionado, todavía no recibo un error indefinido. Por lo tanto, no tiene que escribir una declaración if adicional antes de tomar el valor del elemento.

Aquí hay un ejemplo muy básico de jsfiddle .

Yusuf Uzun
fuente
1
Este es un uso incorrecto del atributo de nombre para las entradas de radio. Los botones de radio en un grupo deben tener el mismo nombre si solo desea permitir un solo valor del grupo. Hacerlo de esta manera lo hace funcionar como casillas de verificación, permitiendo múltiples selecciones en lugar de una sola selección dentro del grupo.
MistyDawn
@MistyDawn tienes razón, ni siquiera recuerdo cómo escribí esto, probablemente sea por arreglar un error.
Yusuf Uzun
2

Aquí hay 2 botones de radio, a saber, rd1 y Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

La forma más sencilla de verificar qué botón de opción está marcado, marcando la propiedad individual (": checked")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }
Mohan
fuente
Esta no es una solución muy robusta. Es mejor tener un div que contenga, y luego mirar todas las radios debajo de él y seleccionar el marcado. También puede mirar todas las radios con un nombre determinado y luego encontrar la marcada. Esto reduce la necesidad de cambiar el código cada vez que se agrega un botón.
Richard Duerr
Si su página tiene más de 2 entradas de radio, esto podría ser MUY confuso y asignar una identificación a cada radio requeriría mucho tiempo. Este método no suele considerarse una buena práctica.
MistyDawn
2

Incluso inputno es necesario como lo sugieren otras respuestas. También se puede usar el siguiente código:

var variable_name = $("[name='radio_name']:checked").val();
shivamag00
fuente
Esto es esencialmente lo mismo que esta respuesta de hace cinco años, solo que sin las inputcomillas innecesarias.
Heretic Monkey
Esas frases no son innecesarias y la razón por la que he publicado la respuesta anterior es que la gente sepa que la entrada no es necesario
shivamag00
Entonces debería considerar editar su pregunta para mencionar esas razones en lugar de usar el comando "Usar el siguiente código". Es posible que desee hacer referencia a una fuente que dice que las citas son necesarias.
Heretic Monkey
@HereticMonkey Hecho la edición ... Gracias :)
shivamag00
1
    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

$(function() {
      $("#submit").click(function() {
        alert($('input[name=s_2_1_6_0]:checked').val());
      });
    });`
Sandeep Kumar
fuente
1
HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});
MD Sohel Rana
fuente
1

En caso de que no conozca el nombre específico o no desee verificar todas las entradas de radio en un formulario, puede usar una variable global para verificar el valor de cada grupo de radio solo una vez: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`
Steffen
fuente