2024年4月15日发(作者：)

antdcheckbox实现多组全选遍历

Antd 是一款 React UI 组件库，antd 中提供了 Checkbox 组件用于

实现选择框功能。为了实现多组全选遍历的功能，我们可以使用

Checkbox 组件的相关属性和事件来操作。

首先，我们需要了解一下 Checkbox 组件的一些常用属性和事件：

1. `checked`：是否选中，可以通过设置该属性来控制 Checkbox 的

选中状态。

2. `indeterminate`：是否为不确定状态，可以通过设置该属性来控

制 Checkbox 的不确定状态。

3. `onChange`：选中状态改变时的回调函数，可以在该回调函数中

处理选中状态改变的逻辑。

基本思路是，对于每一组 Checkbox，我们需要记录它们的选中状态，

并在全选 Checkbox 点击时将所有 Checkbox 的选中状态置为全选

Checkbox 的选中状态。

下面是一个实现多组全选遍历的示例代码：

```jsx

import React, { useState } from 'react';

import { Checkbox } from 'antd';

const App = ( =>

const [group1Checked, setGroup1Checked] = useState(false);

const [group2Checked, setGroup2Checked] = useState(false);

// 全选 Checkbox 点击事件处理函数

const handleAllCheckChange = (e) =>

const checked = d;

setGroup1Checked(checked);

setGroup2Checked(checked);

};

// 单个 Checkbox 点击事件处理函数

const handleCheckboxChange = (group, checked) =>

if (group === 'group1')

setGroup1Checked(checked);

} else if (group === 'group2')

setGroup2Checked(checked);

}

};

return

checked={group1Checked && group2Checked}>

全选

onChange={(e) => handleCheckboxChange('group1',

d)}

checked={group1Checked}

>

组1选项1

onChange={(e) => handleCheckboxChange('group1',

d)}

checked={group1Checked}

>

组1选项2

onChange={(e) => handleCheckboxChange('group2',

d)}

checked={group2Checked}

>

组2选项1

onChange={(e) => handleCheckboxChange('group2',

d)}

checked={group2Checked}

>

组2选项2

};

export default App;

```

在上面的示例代码中，我们使用了 React 的函数组件和 useState

钩子来维护选中状态。通过设置全选 Checkbox 的 `onChange` 属性来监

听全选状态的变化，在全选状态变化时，更新所有 Checkbox 的选中状态。

对于每一组 Checkbox，我们分别使用了独立的状态变量

`group1Checked` 和 `group2Checked` 来记录其选中状态，并在点击对

应的 Checkbox 时更新相应的状态变量。

最后，我们将上述实现放在 `App` 组件中，并导出供其他组件使用。

这样，就实现了一个简单的多组全选遍历功能。你可以根据自己的实

际需求对上面的示例代码进行修改和扩展。