obtener - saber si un radio esta seleccionado jquery

jQuery obtener el valor del botón de radio seleccionado

Question

La declaración del problema es simple. Necesito ver si el usuario ha seleccionado un botón de radio de un grupo de radio. Cada botón de opción en el grupo comparte la misma identificación.

El problema es que no tengo control sobre cómo se genera el formulario. Aquí está el código de ejemplo 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 se verificó sin un valor) . A continuación se muestra cómo se ve un control de radio 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 pueda ayudarme a obtener el valor del botón de opción marcado?

Answer 1

Revisa el ejemplo que 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();

Answer 2

Otra forma 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);
});

Answer 3

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 que esté :checked .

$(function(){
    $("#submit").click(function() {     
        alert($("input[name=q12_3]:checked").val());
    });
});

2. Tenga en cuenta que el código anterior no es lo mismo que usar .is(":checked") . La función is() jQuery devuelve un valor booleano (verdadero o falso) y no un elemento.

Answer 4

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, al marcar la propiedad individual (": checked")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

Answer 5

Consigue todas las radios:

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

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

Answer 6

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

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

No debe utilizarse ningún espacio entre el selector.

Answer 7

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

En el siguiente ejemplo tenemos dos botones de radio. Si el usuario selecciona un botón de opción, mostraremos el valor del botón de opción 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());
        });
    });

Answer 8

No soy una persona de javascript, pero encontré aquí para buscar este problema. Para quien lo busque y busque en Google, espero que esto ayude a algunos. Entonces, como en la pregunta 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 extra si la declaración antes de tomar el valor del elemento.

Aquí está el ejemplo jsfiddle muy básico.

Answer 9

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

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

O solo por

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

Answer 10

Primero, no puedes tener múltiples elementos con la misma id. 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 :checked seleccionado, selecciónelo por su nombre con el :checked filtro :checked .

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

EDITAR

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

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

Answer 11

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>

Answer 12

Solo por nombre

$(function () {
    $(''input[name="EventType"]:radio'').change(function () {
        alert($("input[name=''EventType'']:checked").val());
    });
});

Answer 13

Solo usa.

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

Tan fácil es.

Answer 14

Vea a continuación el ejemplo de trabajo con una colección de grupos de radio cada uno asociado con diferentes secciones. Su esquema de nombres es importante, pero lo ideal es que intente usar un esquema de nombres coherente 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/>

Answer 15

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

Answer 16

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

para atributos anidados

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

No te olvides de llaves individuales para el nombre

Answer 17

$("#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 envolver esto en la función DOM ready ( $(function(){...}); o $(document).ready(function(){...}); ).

Answer 18

<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 maneja jquery para alerta como para el conjunto de valores / Cambiado a través de div id:

$("#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....:-}

Answer 19

<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 volverá, comprueba el valor del botón de radio.

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

Answer 20

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

Answer 21

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something