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

问题描述 投票:0回答:0

我是 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 它会知道它需要取消突出显示

javascript dom
© www.soinside.com 2019 - 2024. All rights reserved.