告别单选框选中取消难题，一劳永逸！

前端

2023-10-09 10:07:47

单选框选中和取消操作：一劳永逸的解决方案

单选框是我们经常在网页表单中用到的元素，它允许用户从一组选项中选择一个。然而，当涉及到单选框的选中和取消操作时，却常常让我们头疼不已。

传统解决方案的弊端

传统上，我们使用原生的 click 事件和 label 标签的伪类样式来实现单选框的选中和取消。然而，这种方法并不完美。由于 click 事件会在 label 标签和 input 标签上都触发，导致选中和取消操作变得复杂且难以区分。

一劳永逸的解决方案

为了解决这一难题，我们带来了一个一劳永逸的解决方案，让你轻松实现单选框的选中和取消操作。该解决方案的原理是使用原生 click 事件和 native 属性来触发原生事件，从而区分第一次点击和第二次点击。

详细步骤

实现这一解决方案只需几个简单的步骤：

在 HTML 中添加单选框元素，包括 input 标签和相应的 label 标签。
在 JavaScript 中，为 input 标签添加原生 click 事件监听器。
在事件监听器中，使用 e.nativeEvent.stopImmediatePropagation() 来阻止事件冒泡。
使用 this.checked = true 来选中单选框。

示例代码

下面是一个使用该解决方案实现单选框选中和取消操作的示例代码：

<!DOCTYPE html>
<html>
<body>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">男</label>

  <input type="radio" name="gender" value="female" id="female">
  <label for="female">女</label>

  <script>
    document.getElementById("male").addEventListener("click", function(e) {
      e.nativeEvent.stopImmediatePropagation();
      this.checked = true;
    });

    document.getElementById("female").addEventListener("click", function(e) {
      e.nativeEvent.stopImmediatePropagation();
      this.checked = true;
    });
  </script>
</body>
</html>