Dołącz detektor zdarzeń przez javascript do przycisku radiowego

Question

Mam kilka przycisków radiowych o tej samej nazwie. W ten sposób:

<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> 

Teraz muszę dodać detektor zdarzeń za pośrednictwem javascript do wszystkich przycisków opcji. Jeśli poniższy pseudokod jest błędny, to proszę mi powiedzieć, jak to zrobić -

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

Answer 1

Dla pętli w języku JavaScript zwracają klucze, a nie wartości. Aby uzyskać w pętli do pracy, zakładając, że nie zostały dodane niestandardowe właściwości do tablicy, można zrobić:

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

Ale należy zawsze pętla tablicą z regularnym dla pętli, aby uniknąć przypadkowego w tym niestandardowych dodanej właściwości przeliczalnych:

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

można dodać tylko jednego słuchacza, który nasłuchuje na wszystkich przycisków radiowych, a nie poszczególnych słuchaczy.

użyciu jQuery, można zrobić to jak to

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

Demo

tylko dla radia w obrębie postaci z identyfikatorem formA

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

wyłącznie dla radia z identyfikatorem myradio

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

Demo

Answer 3

dobry początek, ale nie używaj for..in ten sposób, jak to możliwe iteracyjne nad wszystkie właściwości przeliczalny i nie sprawdził, czy wszyscy oni stanowią elementy.

Znacznie lepiej użyć indeksu:

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

Answer 4

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

jest używany do pętli w obiektach znaleźć właściwości. na tablicy można użyć normalnej pętli

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