javascript - presiono - ¿Cómo puedo saber qué botón de opción se selecciona a través de jQuery?

saber que boton se presiono javascript

Question

Tengo dos botones de opción y quiero publicar el valor del seleccionado. ¿Cómo puedo obtener el valor con jQuery?

Puedo conseguir todos ellos así:

$("form :radio")

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

Answer 1

A partir de esta pregunta , se me ocurrió una forma alternativa de acceder a la input seleccionada actualmente cuando está dentro de un evento de click para su etiqueta respectiva. El motivo es que la input recién seleccionada no se actualiza hasta después del evento de clic de su 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>

Answer 2

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

Answer 3

Así es como escribiría el formulario y manejaría la obtención de la radio verificada.

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 utilizando:

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

Entonces obteniendo el valor comprobado se convierte en:

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

Tener un nombre de clase en la entrada me permite diseñar fácilmente las entradas ...

Answer 4

Consigue todas las radios:

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

Filtrar para obtener el que está marcado.

radios.filter(":checked")

Answer 5

En mi caso tengo dos botones de opción 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>

Answer 6

En un botón de radio generado por JSF (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 form ID es form_id .

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

Answer 7

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 por defecto sin romper nada.

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

Fiddle

Answer 8

Esto debería funcionar:

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

Observe la "" utilizada en torno a la entrada: marcada y no "" como la solución de Peter J

Answer 9

Esto funciona bien

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

Demo de trabajo

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

API para :checked Selector

Answer 10

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 opción se seleccionó. Puede verlo 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"
}

Answer 11

Lo que tenía que hacer era simplificar el código C #, es decir, hacer todo lo posible en el extremo frontal de JavaScript. Estoy usando un contenedor de fieldset porque estoy trabajando en DNN y tiene su propia forma. Así que no puedo agregar un formulario.

Necesito probar qué cuadro de texto de 3 se está utilizando y, en caso afirmativo, ¿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 se puede usar cualquier etiqueta que contenga una identificación. 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 el código C # anterior, que es mucho más complicado. El trabajo pesado se está haciendo aquí.

Tuve que buscar un poco para esto y luego juguetear con él para que funcionara. Así que para otros DNNers, espero que esto sea fácil de encontrar.

Answer 12

Necesita acceso con el selector seleccionado:

Compruebe este documento:

• https://api.jquery.com/checked-selector/

un ejemplo:

$(''input[name=radioName]:checked'', ''#myForm'').val()
$(''#myForm input'').on(''change'', function() {
$(''#val'').text($(''input[name=radioName]:checked'', ''#myForm'').val());
});

#val {
color: #EB0054;
font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Radio value: <span id=''val''><span></h3>
<form id="myForm">
<input type="radio" name="radioName" value="a"> a <br>
<input type="radio" name="radioName" value="b"> b <br>
<input type="radio" name="radioName" value="c"> c <br>
</form>

Answer 13

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>

Answer 14

Otra opción es:

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

Answer 15

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

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

Answer 16

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

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

Aquí hay 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>

Answer 17

Para recuperar todos los valores de los botones de opción en la matriz de JavaScript, utilice el siguiente código jQuery:

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

Answer 18

Puede usar el selector marcado junto con el selector de radio.

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

Answer 19

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

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

Answer 20

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

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

Answer 21

Si tiene múltiples botones de radio 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í.

Answer 22

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

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

Utilice la función de 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 recomendó usar find() , que parece haber sido modificada 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();

Answer 23

Utilizar esta..

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

Answer 24

Utilizar esta:

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

Answer 25

Yo uso este simple script

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

Answer 26

intentalo-

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

Answer 27

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>

Answer 28

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

Answer 29

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

Answer 30

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