How do i select all checkboxes in Javascript?

Question

I am a beginner with javscript So i will be thankful for explanation.

 {isolate_list.map((row) => {
                        return (
                          <FormControlLabel
                            control={
                              <Checkbox
                                color="primary"
                                checked={!!checked}
                                onChange={toggleCheckbox}
                                name="checkedA"
                              >
                                {" "}
                              </Checkbox>
                            }
                            label={row.isolatename}
                          >
                            {""}
                          </FormControlLabel>
                        );
                      })}

and i have this button

                    <Button
                      onClick={selectall}
                      style={{ margin: 50 }}
                      variant="outlined"
                      label="SELECT ALL ISOLATES"
                    >
                      SELECT ALL ISOLATES
                    </Button>

Can anyone help how can i use the button to select all checkboxes and in the same time i can select every checkbox alone by clicking on it? I beginn with this part but i am not sure

 const [checked, setChecked] = React.useState(true);
  const toggleCheckbox = (event) => {
    setChecked(event.target.checked);
  };

Answer 1

You should hold checkbox value's in the and give the state value as a property to each. For example

<Checkbox 
  color="primary" 
  onChange={toggleCheckbox}
  name="checkedA"
  value={checked}
>

And then in the onClick function

setChecked();

Answer 2

The simplest implementations(without any form manager):

1. Declare state to store our checked ids array.

const [checkedIds, setCheckedIds] = useState([]);

2. implement handler.

const handleCheck = useCallback((id) => {
  return () => {
    setCheckedIds(prevIds => prevIds.includes(id) ? prevIds.filter(item => item !== id) : [...prevIds, id]);
  };
}, []);

3. render our checkboxes and apply handler.

list.map(({ id, isolatename }) => (
  <FormControlLabel
    key={id}
    control={
      <Checkbox
        color="primary"
        checked={checkedIds.includes(id)}
        onChange={handleCheck(id)}
        name={`checkbox_${id}`}
      />
    }
    label={isolatename}
  />)
))

ps. in case if <Checkbox/> props 'onChange' returns callback like this (isChecked: boolean) => {} we can simplify (2) step.

const handleCheck = useCallback(id => {
  return isChecked => {
    setCheckedIds(prevIds => isChecked ? prevIds.filter(item => item == id) : [...prevIds, id]);
  };
}, []);