通過javascript將事件監聽器附加到單選按鈕

我有幾個單選按鈕，名稱相同。就像這樣：通過javascript將事件監聽器附加到單選按鈕

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

現在我已經通過JavaScript添加事件偵聽器，所有的單選按鈕。如果下面的僞代碼是錯誤的，那麼請告訴我該怎麼做它 -

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

來源

2012-01-19 Acn

對於在JavaScript中環路返回鍵，而不是值。爲了讓在循環工作，假設你沒有添加自定義屬性到您的數組，你會怎麼做：

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

但是，你應該總是環一個普通的數組循環，以避免意外包括自定義添加的枚舉屬性：

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

來源

2012-01-19 06:42:50

爲什麼你應該「*總是*循環數組與常規for循環」？ – ojrask

@ojrask - 舊的答案，但基本上自定義添加的屬性，如果添加，可以迭代。但是，當然在ES6中，您可以使用數組或任何可迭代的for for循環。 –

啊，是的，我明白了。沒想到這一點。也許編輯答案來詳細說明？ :) – ojrask

您可以只添加一個偵聽器來偵聽所有單選按鈕，而不是單個偵聽器。

使用jQuery，你可以做這樣的

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

Demo

僅適用於表單中的無線電設備與ID formA

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

僅適用於無線電與ID myradio

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

Demo

來源

2012-01-19 06:43:42 xbonez

1.我需要純JavaScript代碼。 2.我想僅將事件監聽器附加到那些名稱屬性設置爲「myradio」（考慮）的收音機。但我認爲上面的代碼會將函數附加到整個文檔中的所有無線電。 :( – Acn

@BigFatPig你可以只將它連接到特定形式的無線電，或者甚至具有特定ID的無線電 – xbonez

@BigFatPig查看編輯 – xbonez

一個好的開始，但不使用的for..in這種方式，因爲它會遍歷所有枚舉的屬性和你沒有檢查，看看它們都代表元素。

好得多使用索引：

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

來源

2012-01-19 06:44:03 RobG

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

用於循環中的對象找到屬性。陣列，你可以使用正常的循環

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

來源

2012-01-19 06:45:08 Diode

通過javascript將事件監聽器附加到單選按鈕

回答

相關問題