單選按鈕混亂:解決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中文網其他相關文章!