import React from 'react';
import { Checkbox, Divider } from 'antd';
import { useState } from 'react';
const CheckboxGroup = Checkbox.Group;
const defaultCheckedList = [];
export default () => {
const [checkedList, setCheckedList] = React.useState(defaultCheckedList);
const [test, setTest] = useState();
const arr = [
{
name: 'sds',
children: [
{ value: 'sd121s', label: 'fgfdwewew' },
{ value: 's1ds', label: 'wewghdgew' },
{ value: 's2ds', label: 'wewhfghew' },
{ value: 's23ds', label: 'wdfgfdgewew' },
],
bool: false,
},
{
name: 's12s',
children: [
{ value: 'sd12s', label: 'wewerwew' },
{ value: 'sd333s', label: 'wewwerew' },
{ value: 'sd3333s', label: 'wesdfswew' },
{ value: 's4444ds', label: 'wewdsfew' },
],
bool: true,
},
{
name: 'sdfdsfs',
children: [
{ value: 'sd314s', label: 'we123213wew' },
{ value: 's2321ds', label: 'wew121ew' },
{ value: 'sd2312s', label: 'wew23213ew' },
{ value: 's2132ds', label: 'we324234wew' },
],
bool: false,
},
];
const onChange = (list: any, name, e) => {
const clickBool = checkedList.some((item) => {
console.log(item);
return item === e.target.value;
});
let newList = list?.map((item) => {
return item.value;
});
if (clickBool) {
checkedList.forEach((item) => {
if (item === e.target.value) {
checkedList.splice(checkedList.indexOf(e.target.value), 1);
}
});
setCheckedList([...checkedList]);
setTest({ ...test, [name]: false });
} else {
setCheckedList([...checkedList, e.target.value]);
let a = newList.map((item, index) => {
return [...checkedList, e.target.value].some((it) => {
return item === it;
});
});
let b = a.every((item) => {
return item === true;
});
if (b) {
setTest({ ...test, [name]: b });
} else {
setTest({ ...test, [name]: b });
}
}
};
const onCheckAllChange = (value: any[], e: any) => {
let tempArray1 = []; //临时数组1
let tempArray2 = []; //临时数组2
const arr2 = value.map((item: { value: any }) => {
return item.value;
});
for (let i = 0; i < arr2.length; i++) {
tempArray1[arr2[i]] = true;
}
for (var i = 0; i < checkedList.length; i++) {
if (!tempArray1[checkedList[i]]) {
tempArray2.push(checkedList[i]);
}
}
setTest({ ...test, [e.target.value]: e.target.checked });
setCheckedList(
e.target.checked
? [
...checkedList,
...value.map((item: { value: any }) => {
return item.value;
}),
]
: [...tempArray2],
);
};
return (
<>
{arr?.map((item) => {
return (
<div key={item.name}>
<Checkbox
value={item.name}
name={item.name}
// indeterminate={indeterminate}
onChange={() => {
onCheckAllChange(item.children, event);
}}
checked={test?.[item?.name]}
// checked={true}
>
{item.name}
</Checkbox>
<br />
<CheckboxGroup
options={item?.children.map((i) => {
return {
value: i.value,
label: i.label,
};
})}
value={checkedList}
onChange={() => {
onChange(item?.children, item.name, event);
}}
/>
</div>
);
})}
</>
);
};
antd checkbox 实现多组全选遍历
最新推荐文章于 2025-02-12 11:42:12 发布