复选框选择所有逻辑反应js。之后如何取消选择？

Question

根据标题，我正在实现一个选择所有复选框的复选框，并且它可以工作，但是当我一个一个取消选择时，检查仍保留在当前行上并消失在其他行上。

关于逻辑的注意事项：我有一个单独的组件，其中我有一个复选框来全选，并且选中该复选框后，我在本地存储中设置了一个布尔变量，以便在另一个组件中读取。

principalCheckbox 代码：

function handleChange() {
    if (checked === false) {
        localStorage.setItem('selectAllChecked', String(true))
        dispatch(reduxActions.selectAll())
        setChecked(true)
    } else {
        dispatch(reduxActions.clearSelection())
        localStorage.setItem('selectAllChecked', String(false))
        setChecked(false)
    }
}

<input type='checkbox' checked={checked} onChange={handleChange} />

单个复选框逻辑

<input 
    type='checkbox' 
    checked={checked ? checked : areAllSelected} 
    onChange={handleChange} 
/>

让我们分析一下条件 {checked ?checked : areAllSelected}：

case1:so 检查最初是假的（没有选择所以它进入 else->但是 allselected 也是假的，所以最初没有选择任何东西->OK）

case2：我点击单个复选框，所以选中存在，值是“选中”，所以单个项目被正确选择->ok

case3：我点击 selectAll 之前没有检查任何内容，所以条件转到 else 并且都被选中 -OK

case4：与 case 3 相同，我选择了所有内容，但是当我单击单行时，selectAll 的值为 false，并且单行中的一个为 true（但之前也被选中）并且它仍然处于选中状态，而应该是取消选择

关于如何实现这一目标的任何想法？

Answer 1

修改逻辑会更容易。

“全部”复选框的选择/取消选择应触发所有项目的真正更改为选中或未选中。

“全部”复选框的实际状态应由其余“单个”复选框的状态计算。