antd checkbox inside a button - html

Question

react beginner here, here i have antd checkbox, i want to change this checkbox into a button but still have checkbox functionality: here is my checkbox:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<Checkbox
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
</div>
this is what i tried to do, i tried to give opacity zero to checkbox to hide it and then put checkbox inside a button in order to change the look of it to button and have checkbox functionality, but problem is, this new button is working if you click on the left side of the button but right side is not working, any solution ?
:
import { Checkbox } from "antd";
<div className="modal-body d-flex flex-column">
<button>
<Checkbox
style={{ opacity: "0" }}
indeterminate={indeterminate}
onChange={onCheckAllChange}
checked={checkAll}
>
Select All{" "}
</Checkbox>
Select All
</button>
</div>

Answer 1

If you want the button to do exactly what the checkbox does, simply pass the onCheckAllChange to the button onClick.
<div className="modal-body d-flex flex-column">
<button onClick={onCheckAllChange}>
Select All
</button>
</div>
and your handle change is something like this assuming your state variables are
checkedList, indeterminate, and checkAll:
const onCheckAllChange = (e: any) => {
setCheckedList(!checkedList.length ? allColumnKeys : []);
setIndeterminate(false);
setCheckAll(!checkAll);
};