如何在 JavaScript 中追蹤單選按鈕的選取和未選取狀態？

改良的單選按鈕 OnChange 處理程序

在本文中，我們探討了有效處理單選按鈕組 onchange 事件的挑戰。預設情況下，單選按鈕的 JavaScript onchange 事件僅在選取按鈕時觸發，而不是在取消選取按鈕時觸發。

理解問題

考慮具有多個單選的場景表單中具有相同名稱的按鈕。提交表單時，預計只會選擇一個單選按鈕，並且其值與表單資料一起發送。但是，onchange 事件不提供一種機制來捕捉從一個被選擇的按鈕到另一個被選擇的按鈕的轉換。

在您需要追蹤新檢查的按鈕和先前檢查的按鈕的情況下，此行為可能會造成問題。例如，在動態表單中，您可能想要根據單選按鈕選擇的變更執行特定操作或更新 UI。

使用事件偵聽器的解決方法

一種解決方法是利用附加到每個單選按鈕的更改事件的事件偵聽器。透過單獨偵聽每個按鈕的變更事件，我們可以追蹤先前選取的按鈕。

<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)
    });
}</code>

在此程式碼中，我們循環遍歷單選按鈕，為每個按鈕附加一個更改偵聽器，然後定義一個變數 prev 來儲存先前選取的按鈕。當觸發按鈕的變更事件時，我們會擷取先前選取的按鈕的值（如果有），記錄先前和新選取的按鈕的值，並更新 prev 以引用新選取的按鈕。

This方法允許我們捕捉單選按鈕的選取和未選取狀態，提供更完整的事件處理機制。

以上是如何在 JavaScript 中追蹤單選按鈕的選取和未選取狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！