用户检查一次后未通过编程方式选中复选框

Question

我遇到了一个有趣的问题，我正在使用的Vue应用无法解决。我想要的行为（当（取消）选中时选中父复选框，（取消）选中所有子复选框时选中父复选框），但是有问题。

当您单击一个复选框时，该复选框将被父复选框忽略。这意味着在单击任何子复选框之后，单击父复选框不会对之前单击的复选框产生任何影响。它只是保持其价值。

这是很奇怪的地方：我查看了野生动物园中的elements选项卡，它说当（取消）选择父项时，单击框正在更改值，但在视觉上它保持不变。

我知道该框已选中，因为应用程序的其他部分正在执行我期望的操作，但是我不知道为什么它会说一个框具有class =“ checked” checked =“ checked”，但仍然在视觉上不受检查。

单击复选框时，复选框是否还会发生其他事情，从而使我在视觉上检查子复选框的方式不正确？

相关HTML：

<template>
<div v-for=“(foo, bar) in foobar” :key=bar>
<div class=“root”>
    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleRootClick($event)">
</div>
<div class=“child 1”>
    <div v-for=“(foo, bar) in foobar” :key=bar>
        <div class=“child 1 header">
            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild1Click($event)">
        </div>
        <div class=“child 1”>
            <div v-if=“foobar.length > 0">
                <div class=“child 2 header">
                    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild2Click($event)">
                </div>
                <div class="resource-dropdown-contents">
                    <div v-for=“(foo, bar) in foobar” :key=bar>
                        <div class=“child 3 header">
                            <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild3Click($event)">
                        </div>
                        <div class="compute-dropdown-contents">
                            <div v-for=“(foo, bar) in foobar” :key=bar>
                                <div class=“child 4 header">
                                  <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleChild4Click($event)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是相关的打字稿代码：

public handleRootClick(e) {
    const root = e.currentTarget.parentElement.parentElement;
    const checkboxes = root.querySelectorAll('#checkbox');
    const isChecked = checkboxes[0].classList.contains('checked');

    if (isChecked) {
        // ensure all children are unchecked
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.remove('checked');
                checkboxes[i].removeAttribute('checked');
            }
        }
    } else {
        // ensure all children are checked
        for (let i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].classList.contains('checked')) {
                checkboxes[i].classList.add('checked');
                checkboxes[i].setAttribute('checked', 'checked');
            }
        }
    }
    e.stopPropagation();
}

handleChildxClick的其他功能与上述功能非常相似。