javascript - 用户检查一次后未以编程方式检查复选框

Question

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

当您单击一个复选框时，该复选框将被父复选框忽略。这意味着单击任何子复选框后，单击父复选框对先前单击的复选框没有影响；它只是保持它的价值。

这就是它变得奇怪的地方：我查看了 safari 中的元素选项卡，它说当父项被（未）选择时，单击的框正在更改值，但在视觉上它保持不变。

我知道该框已选中，因为应用程序的其他部分正在执行我期望的操作，但我无法弄清楚为什么它会说一个框有 class="checked" checked="checked"，但在视觉上仍然未选中.

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

相关HTML：

<template>
<div v-for=“(foo, bar) in foobar” :key=bar>
<div class=“root”&gt;
    <input id='checkbox' type="checkbox" class="checked" checked="checked" @click=“handleRootClick($event)">
</div>
<div class=“child 1”&gt;
    <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”&gt;
            <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 函数与上述函数非常相似。

标签： javascripthtmltypescriptvue.jscheckbox