JQuery cambiar el valor del botón de opción

Question

Tengo una variable llamada category que debe cambiar su valor de acuerdo con el botón de opción seleccionado. El problema es que no lo entiendo con el clic de un botón de radio u otro, el valor cambiará instantáneamente.

Este es el código que tengo:

<form> 
<input type="radio" name="category" value="doctor" /> Doctor 
<input type="radio" name="category" value="police" checked /> Policia 
</form> 

var category = $('[name="category"]:checked').val(); 

Necesito que cambia automáticamente el valor de la variable category al hacer clic en los botones de radio.

Answer 1

es necesario cambiar el valor de categoría cada vez que un usuario cambia el botón de opción seleccionado. Por lo tanto, necesitará un evento para activar cuando el usuario haga clic en una radio. Se puede extraer de la FIDDLE

var category = null; 
$("input[name='category']").click(function() { 
    category = this.value; 
}); 

Answer 2

Creo que se necesita simplemente algo como esto:

var category; 

    $('radio[name="category"]').click(function(){ 
     category=this.value; 
    }); 

Answer 3

En lugar de utilizar category uso variable de $('[name="category"]:checked').val() donde desea que el valor del botón de opción marcada. De lo contrario, puede utilizar el evento change o click para establecer el valor de los botones de opción checked en la variable category.

Answer 4

conectar un controlador de eventos para el evento change:

$(':radio[name="category"]').change(function() { 
    var category = $(this).filter(':checked').val(); 
}); 

Answer 5

utilizan el .change() con el fin de capturar el evento de cambio para un botón de radio.

Answer 6

var category; 
    $(':radio[name="category"]').change(function() { 
     category=this.value; 
    }); 

y esto es una demostración jsfiddle.net.

Answer 7

No debe dar el mismo ID para más de un elemento, se debe utilizar la clase en lugar de esta manera:

<form> 
    Option 1<input type="radio" name="opt" class="radio" value="Option 1"> 
    Option 2<input type="radio" name="opt" class="radio" value="Option 2"> 
</form> 

en lugar de:

<form> 
    Option 1<input type="radio" name="opt" id="radio" value="Option 1"> 
    Option 2<input type="radio" name="opt" id="radio" value="Option 2"> 
</form> 

y su código sigue siendo el mismo y debería funcionar bien :)