如何使用 OnChange 事件追蹤取消選擇的單選按鈕值？

單選按鈕值中OnChange 事件的解決方法

使用同名單選按鈕時，您可能會遇到onChange 事件的限制取消選擇單選按鈕時不會觸發。這可能會給追蹤先前選擇的值帶來困難。

解決方案

要克服這個問題，您可以使用多種技術的組合：

1. 迭代單選按鈕：使用JavaScript 迭代所有同名的單選按鈕。
2. 更改事件監聽器：為變更事件新增事件監聽器到每個單選按鈕。
3. 上一個單選： 在事件偵聽器外部初始化變數 prev，以最初儲存空值。

4. 內事件監聽器： 在事件監聽器中，會發生以下操作：

   • 如果存在prev 值，則將其值記錄到控制台。
   • 將 prev 值更新為目前單選按鈕。
   • 將目前單選按鈕的值記錄到控制台。

代碼示例：

<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 class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1">
  <input type="radio" name="myRadios"  value="2">
</form></code>

附加說明：

• 此方法可讓您追蹤先前選擇的和新選擇的單選按鈕值。
• 這個概念可以擴展到處理多組單選按鈕。

以上是如何使用 OnChange 事件追蹤取消選擇的單選按鈕值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！