Observando el cambio en la selección del botón de opción usando Prototype JS

Question

Soy relativamente nuevo en Prototype JS (v1.7), y estoy atascado en algo. Intento detectar cuando ocurre un cambio en la selección del botón de radio. Aquí está el código:

Los botones de radio:

<input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" /> 

Javascript: Aquí está una puñalada que tomé en él, lo que no funciona:

Event.observe($$('amounts'), 'change', function(event) { 
    alert('change detected'); 
}); 

Cuando se carga el formulario, no hay botones de radio están marcados Me gustaría que el JavaScript para detectar estos eventos: se selecciona
1) Un botón de radio cuando ninguno fue seleccionado previamente
2) la selección del botón de radio cambia

Cualquier ayuda sería muy apreciada. ¡Gracias!

• Rohan

Answer 1

No funciona porque $$ devuelve una matriz de elementos y Event necesita un solo elemento. También $$('amounts') no coincide con ningún elemento, no hay etiquetas <amounts>.

Una mejor manera es utilizar un único elemento antecesor que sea fácil de identificar.

<form id="amounts-form"> 
    <input class="amounts" type="radio" name="amount" id="amount-1" value="1" /> 
    <input class="amounts" type="radio" name="amount" id="amount-2" value="2" /> 
    <input class="amounts" type="radio" name="amount" id="amount-3" value="3" /> 
</form> 

Ahora no es un identificador único para trabajar, nosotros podemos usar Event.on

$('amounts-form').on('change', '.amounts', function(event) { 
    alert('change detected'); 
}); 

Aviso los eventos están siendo filtrados por '.amounts', dice el periodo de utilizar el nombre de la clase.
Si está utilizando FireBug para Firefox o las herramientas de desarrollador de Chrome, puede probar partes de su script directamente en la consola. Realmente ayuda a encontrar si un selector está haciendo coincidir los elementos que cree que está escribiendo $$('.amounts')

Answer 2

Su más eficiente dar sólo aquellas casillas de verificación de la misma clase, pero u También se puede tratar

$("id^=amounts-").change(function(){alert("blah blah")}) 

Answer 3

La respuesta de Alternegro intenta utilizar un iterador para adjuntar el controlador de eventos directamente a los elementos de radio "cantidad" pero no funciona para un algunas razones:

1. La función "$" no toma los selectores css como parámetros, solo ids. Use "$$" en su lugar.
2. El selector de atributo css "id" debe incluir llaves cuadradas "[]". También se deletrea mal. "cantidades-" debe ser "cantidad-" para que coincida con los identificadores en el ejemplo. O simplemente usa un selector de clase en su lugar: ".amounts".
3. No hay un método de "cambio" que pueda invocarse en los enumerables. Use invoke o algún otro método enumerable en su lugar.

Ésta debería funcionar:

$$("[id^=amount-]").invoke(
    'on', 
    'change', 
    function(){alert("hello " + this.id)} 
) 

(YMMV el uso de "este" en el controlador de eventos.Solo comprobé el código en Firefox)