我可以突出显示已选中的复选框，但无法取消选中它们答案

【问题标题】：I can highlight my checkboxes as checked but cannot uncheck them我可以突出显示已选中的复选框，但无法取消选中它们
【发布时间】：2023-02-21 19:18:06
【问题描述】：

我是 JS 新手我正在尝试使用 vanilla JS 创建一个复选框列表，让它们在单击时突出显示，再次单击时取消突出显示。

我似乎可以做第一部分但不能做第二部分

let check1 = document.getElementById('check1');
let check2 = document.getElementById('check2');
let check3 = document.getElementById('check3');

const checked = '//picsum.photos/25?c=1';
const unchecked = '//picsum.photos/25?c=0';

let box1 = 0;
let box2 = 0;
let box3 = 0;

function checkMe(check, box) {
    if (box == 0) {
        console.log(box)
        check.src = checked;
        box = 1
    } else if (box == 1) {
        console.log(box)
        check.src = unchecked;
        box = 0
    } else {
        console.log('broken');
    }
}

<img id="check1" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check1, box1);">
<img id="check2" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check2, box2);">
<img id="check3" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check3, box3);">

How the checkboxes look

我希望一旦选中一个框，变量就会更新为 1 的值。这表明它已突出显示。然后再次单击时，因为它的值为 1，所以它会知道它需要取消突出显示

【问题讨论】：

我已经为你创建了一个Stack Snippet。如果有任何错误，请随时编辑。

标签： javascript dom

【解决方案1】：

将 box 移出点击功能范围。

let check1 = document.getElementById('check1');
        let check2 = document.getElementById('check2');
        let check3 = document.getElementById('check3');

        const checked = '//picsum.photos/25?c=1';
        const unchecked = '//picsum.photos/25?c=0';

        let box1 = 0;
        let box2 = 0;
        let box3 = 0;
        var box = 0;

        function checkMe(check) {
            if (box === 0) {
                console.log(box)
                check.src = checked;
                box = 1
            } else if (box === 1) {
                console.log(box)
                check.src = unchecked;
                box = 0
            } else {
                console.log('broken');
            }
        }

<img id="check1" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check1, box1);">
    <img id="check2" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check2, box2);">
    <img id="check3" class="checkbox" src="//picsum.photos/25?c=0" onclick="checkMe(check3, box3);">

【讨论】：