如何在 JavaScript 中處理單選按鈕的選取和取消選取事件？-js教程-PHP中文網

如何在 JavaScript 中處理單選按鈕的選取和取消選取事件？

Barbara Streisand

發布： 2024-10-31 05:31:30

原創

652 人瀏覽過

How to Handle Both Check and Uncheck Events for Radio Buttons in JavaScript?

單選按鈕的 OnChange 事件：處理選取和取消選取事件

使用單選按鈕時，有效處理選取和取消選取事件至關重要。標準的 onChange 事件不能滿足這一點，因為它僅在選擇單選按鈕時觸發。這在識別何時取消選擇先前的選擇時留下了空白。

OnChange 事件的解決方法：

考慮以下程式碼片段：

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

登入後複製

此腳本完成所需的任務行為：

此腳本完成所需的任務行為：
此腳本完成所需的任務行為：

此腳本完成所需的任務行為：

這個腳本完成所需的任務行為：

此腳本完成所需的任務行為：迭代所有單選按鈕。對於每個單選按鈕，都會在 onChange 事件中新增一個事件偵聽器。當單選按鈕被檢查時，它會記錄先前檢查的單選按鈕（如果有）的值，並更新對目前檢查的單選按鈕的引用。此解決方案會擷取選取和取消選取事件，使您能夠存取先前和目前選取的單選按鈕的值。 OnClick 事件的限制：onClick 事件雖然在瀏覽器之間更一致，但仍然沒有解決擷取取消選取事件的問題。因此，雖然某些用例可能會考慮使用它，但它並不是使用單選按鈕處理選取和取消選取事件的完整解決方案。

以上是如何在 JavaScript 中處理單選按鈕的選取和取消選取事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！