时间戳

首页 > 解决方案 > 复选框选择所有逻辑反应js。之后如何取消选择？

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

问题描述

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

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

主体复选框代码：

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：所以最初检查为假（未选择任何内容，因此它进入 else->but are allselected 也是假的，因此最初未选择任何内容-> OK）

case2：我单击单个复选框，因此选中存在，值是“选中”，因此正确选择了单个项目-> ok

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

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

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

标签： javascriptreactjscheckboxlocal-storage

解决方案

修改逻辑会更容易。

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

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

推荐阅读