如何在 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中文网其他相关文章！