首頁 > web前端 > js教程 > 主體

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

Barbara Streisand
發布: 2024-10-31 05:31:30
原創
631 人瀏覽過

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>
登入後複製

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

  1. 此腳本完成所需的任務行為:
  2. 此腳本完成所需的任務行為:
此腳本完成所需的任務行為:

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

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

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板