自定义Radio Button点击精度异常：点击区域不符且事件未触发

问题根源 #

1. HTML中两个单选按钮共用同一个id="calcType"，违反HTML唯一性规范，导致label关联逻辑混乱。
2. 事件绑定在.styled-label span元素上，但点击.styled-label的padding区域或内部的radio-label文字时，虽然原生label会触发单选按钮选中，但不会触发span的click事件。
3. JS中手动修改checked状态的逻辑多余，原生单选按钮在点击关联label时会自动切换选中状态。

解决方案一：利用原生单选按钮的change事件（推荐） #

这种方式更贴合原生表单行为，不管点击label的哪个区域（文字、图标、padding），只要单选按钮状态变化就会触发逻辑。

修正后的HTML（修复id和for关联）

<!DOCTYPE html>
<html>
    <head>
        <link href="./example.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <label class="styled-label">
            <label class="radio-label" for="calcType-diff">Difficulty</label>
            <br />
            <input
                class="styled-radio"
                id="calcType-diff"
                type="radio"
                name="calcType"
                value="diff"
                checked
            />
            <span></span>
        </label>

        <label class="styled-label">
            <label class="radio-label" for="calcType-days">Study Days</label>
            <br />
            <input
                class="styled-radio"
                id="calcType-days"
                type="radio"
                name="calcType"
                value="days"
            />
            <span></span>
        </label>

        <script src="./example.js"></script>
    </body>
</html>

修正后的JS

// 监听同一组内所有单选按钮的change事件
document.querySelectorAll('input[name="calcType"]').forEach(radio => {
    radio.addEventListener('change', () => {
        if (radio.checked) {
            console.log(`选中了单选按钮：${radio.value}`)
            // 在这里执行你的业务逻辑
            // setCalcType(radio.value)
            // currentType = radio.value
            // setRangeStyle()
        }
    })
})

解决方案二：限制点击范围仅为单选图标区域 #

如果需要严格限制只有点击视觉上的单选图标才触发选中和事件，可以调整CSS：

/* Custom Radio Buttons */

.styled-radio {
  display: none;
}

.styled-label {
  display: inline-block;
  padding: 5px 10px;
  pointer-events: none; /* 阻止label本身响应点击 */
}

.styled-label span {
  position: relative;
  line-height: 22px;
  cursor: pointer;
  pointer-events: auto; /* 让图标区域响应点击 */
}

.styled-label span:before,
.styled-label span:after {
  content: "";
}

.styled-label span:before {
  border: 1px solid #222021;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
}

.styled-label span:after {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 4px;
  transition: 300ms;
  opacity: 0;
  background-color: red;
}

.styled-label input:checked + span:after {
  opacity: 1;
}

.radio-label::after {
  pointer-events: none;
}

此时点击图标区域才会触发选中和事件，点击文字或padding区域不会有反应，JS可保留原逻辑或改用方案一的change事件。

内容的提问来源于stack exchange，提问作者kaitlynmm569