如何在复选框被勾选时添加greenbox类，取消勾选时自动移除该类

步骤1：修正PHP代码冗余问题 #

原有循环生成的元素存在重复ID问题，不符合HTML规范，调整后代码如下：

echo '<form action="selector.php" id="form1" method="post" target="_self">';

foreach ($Query as $row) {
    $topicId = $row['topic_identification'];
    echo '
    <div class="item">
        <img src="something.png">
                        
        <label class="containerPen" style="color: #00ff00">
            Accept                              
            <input type="checkbox" name="accepted[]" value="'.$topicId.'" id="accepted-'.$topicId.'" />
            <br>
            <span class="checkmarkPen"></span>
        </label>
                        
        <label class="containerPenX" style="color: #ff0000">
            Decline
            <input type="checkbox" name="declined[]" value="'.$topicId.'" id="declined-'.$topicId.'" />
            <span class="checkmarkPenX"></span>
        </label>
    </div>          
    ';
}

echo '
<input type="submit" name="submit" value="submit"> 
</form>
';

步骤2：实现勾选切换类效果 #

你可以通过原生JS实现勾选Accept复选框时，给对应项目外层.item容器添加/移除greenbox类，代码如下，直接插入到页面底部即可：

// 监听所有Accept复选框的变更事件
document.querySelectorAll('input[name="accepted[]"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        // 找到当前复选框所属的项目容器
        const itemEl = this.closest('.item');
        // 根据勾选状态切换greenbox类
        itemEl.classList.toggle('greenbox', this.checked);
        
        // 可选：如果勾选Accept时需要自动取消Decline的勾选，加上下面两行
        const declineCheckbox = itemEl.querySelector('input[name="declined[]"]');
        if (this.checked) declineCheckbox.checked = false;
    });
});

// 可选：如果勾选Decline时需要移除greenbox，加上下面这段监听
document.querySelectorAll('input[name="declined[]"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const itemEl = this.closest('.item');
        const acceptCheckbox = itemEl.querySelector('input[name="accepted[]"]');
        if (this.checked) {
            acceptCheckbox.checked = false;
            itemEl.classList.remove('greenbox');
        }
    });
});

可选纯CSS实现（仅给Accept标签区域加背景） #

如果你不需要给整个项目容器加背景，只需要给Accept复选框所属标签加背景，可以不用JS，直接加以下CSS即可：

.containerPen input:checked {
    background-color: green;
}

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