javascript - saber - ¿Cómo obtener valor del botón de radio seleccionado?
obtener valor radio button jquery (25)
CÓDIGO HTML:
<input type="radio" name="rdoName" value="YES"/> <input type="radio" name="rdoName" value="NO"/>
CÓDIGO JQUERY:
var value= $("input:radio[name=rdoName]:checked").val();
$("#btnSubmit").click(function(){
var value=$("input:radio[name=rdoName]:checked").val();
console.log(value);
alert(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rdoName" value="YES"/> YES
<input type="radio" name="rdoName" value="NO"/> NO
<br/>
<input type="button"id="btnSubmit"value="Which one Selected"/>
Conseguirás
value="YES" //if checked Radio Button with the value "YES"
value="NO" //if checked Radio Button with the value "NO"
Busqué en todas partes e intenté todo para obtener el valor seleccionado de un grupo de botones de opción.
Aquí está mi HTML:
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
Aquí está mi .js:
var rates = document.getElementById(''rates'').value;
var rate_value;
if(rates ==''Fixed Rate''){
rate_value = document.getElementById(''r1'').value;
}else if(rates ==''Variable Rate''){
rate_value = document.getElementById(''r2'').value;
}else if(rates ==''Multi Rate''){
rate_value = document.getElementById(''r3'').value;
}
document.getElementById(''results'').innerHTML = rate_value;
Me mantengo indefinido.
El que funcionó para mí se encuentra a continuación en api.jquery.com.
HTML
<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>
JavaScript
var selectedOption = $("input:radio[name=option]:checked").val()
La variable selectedOption contendrá el valor del botón de radio seleccionado (es decir) o1 o o2
En Javascript podemos obtener los valores mediante el uso de " getElementById() " de Id. En el código anterior que publicaste tiene un nombre que no es Id para que lo modifiques así.
if (document.getElementById(''r1'').checked) {
rate_value = document.getElementById(''r1'').value;
}
usa este valor de tasa de acuerdo a tu código
En PHP es muy fácil.
página html
Male<input type="radio" name="radio" value="male"><br/>
Female<input type="radio" name="radio" value="female"><br/>
Others<input type="radio" name="radio" value="other"><br/>
<input type="submit" value="submit">
$ radio = $ _ POST [''radio''];
usar php if (isset ($ _ POST [''submit'']))
{
echo "has seleccionado". $ radio. "gracias";
}
Esto funciona en IE9 y superior y en todos los demás navegadores.
document.querySelector(''input[name="rate"]:checked'').value;
Ha pasado aproximadamente un año desde que se hizo la pregunta, pero pensé que era posible una mejora sustancial de las respuestas. Considero que este script es el más fácil y versátil, ya que comprueba si se ha marcado un botón y, de ser así, cuál es su valor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check radio checked and its value</title>
</head>
<body>
<form name="theFormName">
<input type="radio" name="theRadioGroupName" value="10">
<input type="radio" name="theRadioGroupName" value="20">
<input type="radio" name="theRadioGroupName" value="30">
<input type="radio" name="theRadioGroupName" value="40">
<input type="button" value="Check" onclick="getRadioValue(''theRadioGroupName'')">
</form>
<script>
function getRadioValue(groupName) {
var radios = theFormName.elements[groupName];
window.rdValue; // declares the global variable ''rdValue''
for (var i=0; i<radios.length; i++) {
var someRadio = radios[i];
if (someRadio.checked) {
rdValue = someRadio.value;
break;
}
else rdValue = ''noRadioChecked'';
}
if (rdValue == ''10'') {
alert(''10''); // or: console.log(''10'')
}
else if (rdValue == ''noRadioChecked'') {
alert(''no radio checked'');
}
}
</script>
</body>
</html>
También puede llamar a la función dentro de otra función, como esta:
function doSomething() {
getRadioValue(''theRadioGroupName'');
if (rdValue == ''10'') {
// do something
}
else if (rdValue == ''noRadioChecked'') {
// do something else
}
}
Mi opinión sobre este problema con javascript puro es encontrar el nodo marcado, encontrar su valor y sacarlo de la matriz.
var Anodes = document.getElementsByName(''A''),
AValue = Array.from(Anodes)
.filter(node => node.checked)
.map(node => node.value)
.pop();
console.log(AValue);
Tenga en cuenta que estoy usando las funciones de flecha . Vea este fiddle para un ejemplo de trabajo.
Otra opción (aparentemente más antigua) es usar el formato: "document.nameOfTheForm.nameOfTheInput.value;" por ejemplo, document.mainForm.rads.value;
document.mainForm.onclick = function(){
var radVal = document.mainForm.rads.value;
result.innerHTML = ''You selected: ''+radVal;
}
<form id="mainForm" name="mainForm">
<input type="radio" name="rads" value="1" />
<input type="radio" name="rads" value="2" />
<input type="radio" name="rads" value="3" />
<input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>
Puede referirse al elemento por su nombre dentro de un formulario. Sin embargo, su HTML original no contiene un elemento de formulario.
Trabajando con el violín aquí: https://jsfiddle.net/Josh_Shields/23kg3tf4/1/
Para ustedes, las personas que viven al borde:
Ahora hay algo que se llama RadioNodeList y el acceso a su propiedad de valor devolverá el valor de la entrada actualmente verificada. Esto eliminará la necesidad de filtrar primero la entrada ''verificada'' como vemos en muchas de las respuestas publicadas.
Formulario de ejemplo
<form id="test">
<label><input type="radio" name="test" value="A"> A</label>
<label><input type="radio" name="test" value="B" checked> B</label>
<label><input type="radio" name="test" value="C"> C</label>
</form>
Para recuperar el valor comprobado, podría hacer algo como esto:
var form = document.getElementById("test");
alert(form.elements["test"].value);
El JSFiddle para probarlo: http://jsfiddle.net/vjop5xtq/
Tenga en cuenta que esto se implementó en Firefox 33 (todos los demás navegadores principales parecen admitirlo). Los navegadores más antiguos requerirán un polfyill para RadioNodeList para que esto funcione correctamente
Puede obtener el valor utilizando la propiedad checked .
var rates = document.getElementsByName(''rate'');
var rate_value;
for(var i = 0; i < rates.length; i++){
if(rates[i].checked){
rate_value = rates[i].value;
}
}
Puedes usar .find() para seleccionar el elemento marcado:
var radio = Array.from(document.querySelectorAll(''#rate input''))
var value = radio.length && radio.find(r => r.checked).value
Si está utilizando JQuery , use el fragmento de abajo para el grupo de botones de radio.
var radioBtValue= $(''input[type=radio][name=radiobt]:checked'').val();
Si está utilizando jQuery:
$(''input[name="rate"]:checked'').val();
Si los botones están en una forma.
var myform = new FormData(getformbywhatever); myform.get("rate");
QuerySelector anterior es una mejor solución. Sin embargo, este método es fácil de entender, especialmente si no tienes una pista sobre CSS. Además, es muy probable que los campos de entrada estén en un formulario de todos modos.
No comprobé, hay otras soluciones similares, perdón por la repetición.
Simplemente use: document.querySelector(''input[rate][checked]'').value
Suponiendo que la variable myForm hace referencia a su elemento de formulario, y que sus botones de radio comparten el nombre "my-radio-button-group-name", el siguiente es código compatible con JavaScript y estándares (aunque no he comprobado que esté disponible) en todos lados):
myForm.elements.namedItem("my-radio-button-group-name").value
Lo anterior producirá el valor de un elemento de botón de radio marcado (o seleccionado, como también se le llama), si lo hubiera, o null . El quid de la solución es la función namedItem que funciona específicamente con botones de radio.
Consulte HTMLFormElement.elements , HTMLFormControlsCollection.namedItem y especialmente RadioNodeList , ya que namedItem generalmente devuelve un objeto RadioNodeList .
Utilizo MDN porque permite hacer un seguimiento del cumplimiento de los estándares, al menos en gran medida, y porque es más fácil de comprender que muchas publicaciones de WhatWG y W3C.
Una mejora de las funciones sugeridas anteriormente:
function getRadioValue(groupName) {
var _result;
try {
var o_radio_group = document.getElementsByName(groupName);
for (var a = 0; a < o_radio_group.length; a++) {
if (o_radio_group[a].checked) {
_result = o_radio_group[a].value;
break;
}
}
} catch (e) { }
return _result;
}
Usé la función jQuery.click para obtener el resultado deseado:
$(''input[name=rate]'').click(function(){
console.log(''Hey you clicked this: '' + this.value);
if(this.value == ''Fixed Rate''){
rate_value = $(''#r1'').value;
} else if(this.value ==''Variable Rate''){
rate_value = $(''#r2'').value;
} else if(this.value ==''Multi Rate''){
rate_value = $(''#r3'').value;
}
$(''#results'').innerHTML = rate_value;
});
Espero eso ayude.
Use document.querySelector (''input [tipo = radio]: marcado''). Valor; para obtener el valor de la casilla seleccionada, puede usar otros atributos para obtener un valor como nombre = género, etc. Por favor, lea el siguiente fragmento de código que definitivamente le será útil.
Solución
document.mainForm.onclick = function(){
var gender = document.querySelector(''input[name = gender]:checked'').value;
result.innerHTML = ''You Gender: ''+gender;
}
<form id="mainForm" name="mainForm">
<input type="radio" name="gender" value="Male" checked/>Male
<input type="radio" name="gender" value="Female" />Female
<input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>
Gracias
compruebe el valor por ID:
var CheckedValues = ($("#r1").is('':checked'')) ? 1 : 0;
llamar directamente a un botón de radio muchas veces le da el valor del botón PRIMERO, no el botón COMPROBADO. En lugar de pasar por los botones de radio para ver cuál está marcado, prefiero llamar a una función javascript onclick que establece una variable que luego se puede recuperar a voluntad.
<input type="radio" onclick="handleClick(this)" name="reportContent" id="reportContent" value="/reportFleet.php" >
que llama:
var currentValue = 0;
function handleClick(myRadio) {
currentValue = myRadio.value;
document.getElementById("buttonSubmit").disabled = false;
}
la ventaja adicional es que puedo tratar los datos y / o reaccionar a la verificación de un botón (en este caso, habilitar el botón SUBMIT).
https://codepen.io/anon/pen/YQxbZJ
El HTML
<div id="rates">
<input type="radio" id="x1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="x2" name="rate" value="Variable Rate"
checked="checked"> Variable Rate
<input type="radio" id="x3" name="rate" value="Multi Rate" > Multi Rate
</div>
<button id="rdio"> Check Radio </button>
<div id="check">
</div>
El js
var x ,y;
var x = document.getElementById("check");
function boom()
{
if (document.getElementById("x1").checked)
y = document.getElementById("x1").value;
else if(document.getElementById("x2").checked)
y = document.getElementById("x2").value;
else if (document.getElementById("x3").checked)
y = document.getElementById("x3").value;
else
y = "kuch nhi;"
x.innerHTML = y;
}
var z = document.getElementById(''rdio'');
z.addEventListener("click", boom);`
<form id="rates">
<input type="radio" name="rate" value="Fixed Rate"> Fixed
<input type="radio" name="rate" value="Variable Rate"> Variable
<input type="radio" name="rate" value="Multi Rate" checked> Multi
</form>
entonces...
var rate_value = rates.rate.value;
var rates = document.getElementById(''rates'').value;
El elemento de tarifas es un div , por lo que no tendrá un valor. Esto es probablemente de donde viene lo undefined .
La propiedad checked le dirá si el elemento está seleccionado:
if (document.getElementById(''r1'').checked) {
rate_value = document.getElementById(''r1'').value;
}
var rates = document.getElementById(''rates'').value;
no se pueden obtener los valores de un botón de radio como ese en lugar de usar
rate_value = document.getElementById(''r1'').value;