点击Checkbox时如何用JavaScript修改Card颜色？元素引用求助

第一步：获取DOM元素 #

你可以通过以下几种方式定位目标元素：

• 获取Checkbox：利用它的id属性，用document.getElementById('ana')或document.querySelector('#ana')直接定位
• 获取对应Card：因为Checkbox是Card的子元素，用Checkbox的closest('.card')方法能快速找到最近的父级Card元素（比逐层调用parentElement更灵活，结构调整时也不用改代码）

第二步：绑定事件并修改样式 #

推荐用CSS类控制颜色，比直接修改style属性更易维护。先定义高亮类，再根据Checkbox的选中状态切换这个类。

完整代码示例：

<body>
    <style>
        .card {
            /* 默认样式 */
            padding: 1rem;
            border-radius: 8px;
            background-color: #fff;
            transition: background-color 0.3s;
        }
        /* 选中时的高亮样式 */
        .card.selected {
            background-color: #e8f4fd;
        }
    </style>
    <div class="container">
        <div class="card">
            <input type="checkbox" name="platform" value="ana" id="ana">
            <label for="ana">
                <div class="card-image">
                    <img src="./images/Ana.png" alt="Character">
                </div>
                <div class="card-body">
                    <img class="heroCardRole" src="./images/Support.svg">
                    <h2>Ana</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
                </div>
            </label>
        </div>
    </div>
    <script>
        // 获取Checkbox元素
        const checkbox = document.getElementById('ana');
        // 获取对应的Card元素
        const card = checkbox.closest('.card');

        // 绑定点击事件
        checkbox.addEventListener('click', function() {
            // 根据选中状态切换类
            if (this.checked) {
                card.classList.add('selected');
            } else {
                card.classList.remove('selected');
            }
        });
    </script>
</body>

批量处理多组Card的补充 #

如果页面有多个Card+Checkbox组合，改成批量处理逻辑即可：

// 获取所有Checkbox
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
    const card = checkbox.closest('.card');
    checkbox.addEventListener('click', function() {
        // 用toggle简化添加/移除类的逻辑
        card.classList.toggle('selected');
    });
});

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