Adjuntar el detector de eventos mediante JavaScript al botón de opción

Question

Tengo varios botones de opción con el mismo nombre. De esta manera:

<form name="formA"> 
<input type="radio" name="myradio" value="A"/> 
<input type="radio" name="myradio" value="B"/> 
<input type="radio" name="myradio" value="C"/> 
<input type="radio" name="myradio" value="D"/> 
</form> 

Ahora tengo que agregar el detector de eventos a través de javascript a todos los botones de opción. Si el pseudocódigo a continuación es incorrecto, por favor, dime cómo hacerlo-

var radios = document.forms["formA"].elements["myradio"]; 
    for(radio in radios) { 
    radio.onclick = function() { 
     alert(radio.value); 
    } 
} 

Answer 1

Porque en bucles en JavaScript devolver las llaves, no los valores. Para obtener el bucle en el que trabajar, suponiendo que no haya agregado propiedades personalizadas a la matriz, que haría:

for(radio in radios) { 
    radios[radio].onclick = function() { 
     alert(this.value); 
    } 
} 

Pero debe siempre bucle de una matriz con un habitual para bucle para evitar que accidentalmente incluyendo propiedades enumerables personalizadas:

var radios = document.forms["formA"].elements["myradio"]; 
for(var i = 0, max = radios.length; i < max; i++) { 
    radios[i].onclick = function() { 
     alert(this.value); 
    } 
} 

Answer 2

Puede agregar solo un único oyente que escuche todos los botones de opción, en lugar de oyentes individuales.

usando jQuery, puede hacerlo de esta manera

$(document).ready(function(){ 
    $('input[type=radio]').click(function(){ 
     alert(this.value); 
    }); 
}); 

Demo

Sólo para las radios dentro de un formulario con el ID formA

$(document).ready(function(){ 
     $('#formA input[type=radio]').click(function(){ 
      alert(this.value); 
     }); 
    }); 

Sólo para radios con un id myradio

$(document).ready(function(){ 
    $('input[type=radio]').click(function(){ 
     if (this.id == "myradio") 
      alert(this.value); 
    }); 
}); 

Demo

Answer 3

Un buen comienzo, pero no use for..in de esa manera, ya que iterar sobre todas las propiedades enumerables y no se ha comprobado si todos ellos representan elementos.

mucho mejor usar un índice:

for (var i=0, iLen=radios.length; i<iLen; i++) { 
    radios[i].onclick = function() {...}; 
} 

Answer 4

for(var property in object) { ... } 

se utiliza para bucle de objetos para encontrar propiedades. para la matriz se puede utilizar normal para bucle

for(var i=0; i< radios.length; i++) { 
    var radio = radios[i]; 
    .... 
}