使用原生JS切换checkbox状态时如何获取对应元素的自定义属性值

核心问题原因 #

• HTML规范要求id属性全局唯一，你给3个checkbox复用了id="status"，document.getElementById('status')只会返回页面中第一个匹配的元素，所以永远输出属性值1。
• 原事件监听逻辑没有定位到实际触发change事件的checkbox元素，直接全局查询id自然无法获取对应元素的属性。

修复代码 #

方案1：事件委托（推荐，性能更优，新增元素无需重新绑定） #

利用事件对象拿到真实触发事件的元素，无需给每个checkbox单独绑定监听：

document.addEventListener('change', function (e) {
    // 仅处理class为cgroup的复选框的触发事件
    if (e.target.classList.contains('cgroup')) {
        const attrValue = e.target.getAttribute('data')
        console.log(attrValue)
        // 若需要同时获取选中状态，可额外打印 e.target.checked
    }
})

方案2：给每个复选框单独绑定事件 #

// 获取所有class为cgroup的复选框
const checkList = document.querySelectorAll('.cgroup')
checkList.forEach(item => {
    item.addEventListener('change', function () {
        const attrValue = this.getAttribute('data')
        console.log(attrValue)
    })
})

优化建议 #

你当前用的自定义属性data不符合HTML5规范，建议改为data-前缀的格式，比如data-id="1"，既可以避免和原生属性冲突，取值也更简便：

// 对应属性为data-id时可以直接通过dataset取值
const id = e.target.dataset.id

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