2010-11-09 18 views
43

¿Cómo valor predeterminado el valor de un botón de opción no seleccionado en 0?JQuery: cómo obtener el valor del botón de opción seleccionado?

tengo el código HTML siguiente:

<input type="radio" name="myradiobutton" value="1" />1 
<input type="radio" name="myradiobutton" value="2" />2 
<input type="radio" name="myradiobutton" value="3" />3 

y tengo el siguiente código para obtener el valor del botón de opción seleccionado

var radio_button_value $('input[name=myradiobutton]:radio').click(function() {var value = $(this).val();}); 

El problema es que quiero por defecto el valor de radio_button_value a 0 en el evento nada está seleccionado. ¿Cómo puedo hacer eso?

básicamente quiero hacer el pseduo-código de abajo (pero esto no funciona)

var radio_button_value $('input[name=myradiobutton]:radio').click(function() { 
if set 
    return $(this).val(); 
else 
    return 0; 
}); 

ACTUALIZACIÓN

Parece que hay confusión en lo que estoy pidiendo.

Lo que quiero hacer cuando la página se carga (antes de que el usuario haya tenido la oportunidad de seleccionar un botón de opción), quiero una función que devolverá 0 para el valor del botón de opción.

Luego, una vez que un usuario selecciona un botón de opción, esa MISMA función devolverá el valor seleccionado del botón de opción.

¿Tiene sentido?

+1

No entiendo esto. Seguramente si ha hecho clic en un botón de radio, ¿uno de ellos debe estar seleccionado?¿En qué contexto necesitas esto? – lonesomeday

+0

Quiero establecer el valor predeterminado en 0 para que cuando se cargue la página, antes de que el usuario tuviera la oportunidad de seleccionar un botón de opción, mi función devuelva 0. Luego, cuando el usuario seleccione un botón de opción, devolverá el valor de el atributo seleccionado. ¿Tener sentido? – StaceyH

+1

Casi. Entonces, ¿tiene una función (no llamada al hacer clic en el botón de radio) que necesite saber si hay una radio seleccionada o no? – lonesomeday

Respuesta

3

Probablemente el mejor método (especialmente si desea poder publicar un valor predeterminado), sería tener un botón de opción oculto que comienza como seleccionado y tiene su valor predeterminado. Así que algo como esto:

<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" /> 
<input type="radio" name="myradiobutton" value="1" />1 
<input type="radio" name="myradiobutton" value="2" />2 
<input type="radio" name="myradiobutton" value="3" />3 

Si no puede modificar su código HTML directamente, se podría añadir que a través de script:

$(function() { 
    $('input[name=myradiobutton]:radio:first').before('<input type="radio" name="myradiobutton" value="0" checked="checked" style="display:none;" />'); 
}); 

He aquí una demostración de que: http://jsfiddle.net/Ender/LwPCv/

+0

Sneaky! Me gusta. –

+0

Por alguna razón, esto en realidad NO funciona. Es porque estoy usando el método **. Click ** y no se "hace clic" en el valor predeterminado – StaceyH

+0

Después de hacer clic en algo, el valor indicado sería el valor del elemento que acaba de hacer clic. Vea esta demostración modificada: http://jsfiddle.net/Ender/z52PS/ – Ender

90

$('input[name=myradiobutton]:radio:checked') obtendrá usted el botón de selección seleccionado $('input[name=myradiobutton]:radio:not(:checked)') le conseguirá los botones de opción no seleccionados

Usando esto usted c un hacer esto

$('input[name=myradiobutton]:radio:not(:checked)').val("0"); 

Actualización: Después de leer su actualización Creo que entiendo Usted tendrá que hacer algo como esto

var myRadioValue; 

function radioValue(jqRadioButton){ 
    if (jqRadioButton.length) { 
    myRadioValue = jqRadioButton.val(); 
    } 
    else { 
    myRadioValue = 0; 
    } 
} 

$(document).ready(function() { 
    $('input[name=myradiobutton]:radio').click(function() { //Hook the click event for selected elements 
    radioValue($('input[name=myradiobutton]:radio:checked')); 
    }); 

    radioValue($('input[name=myradiobutton]:radio:checked')); //check for value on page load 
}); 
+0

Pero el botón de radio NO se ha seleccionado TODAVÍA. Por lo tanto, esto no funcionará solo. – StaceyH

+0

@StaceyH ... ¿Cuándo quieres hacer este control? OnSubmit de la forma? –

+0

@StaceyH ... Siempre que tenga una respuesta actualizada –

18

Utilice el :checked para determinar si se ha seleccionado un valor:

function getRadioValue() { 
    if($('input[name=myradiobutton]:radio:checked').length > 0) { 
     return $('input[name=myradiobutton]:radio:checked').val(); 
    } 
    else { 
     return 0; 
    } 
} 

actualización se puede llamar a la función anterior en cualquier momento para obtener el valor seleccionado de los botones de opción.Usted puede conectar en ella la carga y entonces siempre que el valor cambia con los siguientes eventos:

$(document).ready(function() { 
    // Value when you load the page for the first time 
    // Will return 0 the first time it's called 
    var radio_button_value = getRadioValue(); 

    $('input[name=myradiobutton]:radio').click(function() { 
     // Will get the newly selected value 
     radio_button_value = getRadioValue(); 
    }); 
} 
2

que realmente debería estar usando casillas de verificación si va a haber un caso en que algo no está seleccionado.

según la W3C

Si hay un botón de radio en un conjunto que comparten el mismo nombre de control es inicialmente "on", el comportamiento del agente de usuario para controlar la elección de qué es inicialmente "en" no está definido. Nota. Dado que las implementaciones existentes manejan este caso de manera diferente, la especificación actual difiere de RFC 1866 ([RFC1866] sección 8.1.2.4), que establece:

En todo momento, se verifica exactamente uno de los botones de opción de un conjunto. Si ninguno de los elementos de un conjunto de botones de radio especifica 'CHECKED', entonces el agente de usuario debe verificar inicialmente el primer botón de radio del conjunto.

Dado que el comportamiento del agente de usuario es diferente, los autores deben asegurarse de que en cada conjunto de botones de radio uno esté inicialmente "encendido".

3

Sé que esto es una vieja pregunta, pero me parece que las respuestas no son lo suficientemente sufficent

La forma más limpia de hacer esto es utilizar este código

$(".myRadio").click(function() { 
alert($(this).val()); 
}); 

:-)

Sus datos de entrada forma debe tener este aspecto

<input type="radio" value="40000" name="pay" class="myRadio" /> 
<label for="40000">40000</label> 
+0

definitivamente no es una opción limpia, pero funciona. +1 – Kurkula

6
jQuery("input:radio[name=myradiobutton]:checked").val(); 
+1

Creo que esa sugerencia se ha incluido en una respuesta anterior ... – alexwhan

3

Este método devuelve el valle Jquery por defecto cuando se carga la página 0 ...

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

se iniciará tan pronto como se carga la página. Puede mantenerla bajo algunos eventos como botón de clic

$("#btn").click(function() { 
var val= $('input[type="radio"]:checked').val(); 
}); 
2

Este trabajo para mí espero que esto ayudará a: para conseguir la radio valor seleccionado tiene que utilizar el nombre de relación como selector de esta manera

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

selectedVal tendrá el valor necesario, cambiar el radio_name de acuerdo a la suya, en su caso, sería b "myRadioButton"

selectedVal = $('input[name="myradiobutton"]:checked').val(); 
-1

para botones de radio utilizan la siguiente secuencia de comandos:

var myRadio = $('input[name=meme_wall_share]'); 
var checkedValue = myRadio.filter(':checked').val(); 
+0

Lo siento pero, de esta manera, no funciona. – Pablo

3

para obtener el valor del botón de opción seleccionado, uso RadioButtonName y el ello el formulario que contiene el RadioButton.

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

O sólo

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