如何捕捉單選按鈕取消選擇事件：超越 onChange 限制

單選按鈕混亂：解決onChange 限制

單選按鈕提供了一種處理單一選擇的便捷方法，但捕捉其完整狀態變更可能會很困難。具有挑戰性的。考慮一個場景，我們有多個同名的單選按鈕，並且需要追蹤選擇和取消選擇。

onChange 事件似乎是一個明顯的選擇，但當取消選擇單選按鈕時它不會觸發。這在我們需要捕獲已選取和未選取事件的情況下會產生問題。

解決方法

一個解決方法是利用 addEventListener 方法並附加更改事件處理程序到每個單選按鈕。在事件處理程序內部，我們可以使用變數維護先前選取的單選按鈕 (prev) 的參考。

選取單選按鈕時，我們會記錄先前的值 (prev.value) 和目前的值值（這個值）。這使我們能夠捕獲選取和未選取的事件。

<code class="js">var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

隨附的HTML 程式碼：

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

透過此解決方法，我們有了一個通用的解決方案，可以擷取所有單選按鈕的onChange 事件按鈕，包括取消選擇事件。

以上是如何捕捉單選按鈕取消選擇事件：超越 onChange 限制的詳細內容。更多資訊請關注PHP中文網其他相關文章！