Check a checkbox when one is checked react-hook-form

Question

I have 3 checkboxes CheckboxA, CheckboxB, CheckboxC. If checkboxB or checkboxC are checked, I want checkboxA to be checked as well

basic checkbox example from react-hook-form https://codesandbox.io/s/cool-clarke-y8cjsw?file=/src/App.js:1792-1801

what does that mean *If checkboxB or checkboxC are checked, I want checkboxA to be checked as well*. Please be specific. — DecPK, Jul 12 '22 at 07:28
Think of it this way, there are 3 checkboxes. When I tick the 2nd or 3rd checkbox, the 1st checkbox will be automatically marked I added a picture maybe it will be more understandable and there is a codesandbox link @NullPointerException — Ibrahim Yolbir, Jul 12 '22 at 07:42

score 1 · Accepted Answer · answered Jul 12 '22 at 07:51

1

In onChange you can check if current input is not A and its value is checked so you can update your new value

if (option !== "a" && e.target.checked) valueCopy[0] = "a";

Checkboxes

const Checkboxes = ({ options, control, name }) => {
  const { field } = useController({
    control,
    name
  });

  return (
    <>
      {options.map((option, index) => (
        <input
          onChange={(e) => {
            const valueCopy = [...field.value];

            valueCopy[index] = e.target.checked ? e.target.value : null;
            if (option !== "a" && e.target.checked) valueCopy[0] = "a";
            field.onChange(valueCopy);
          }}
          key={option}
          type="checkbox"
          checked={field.value.includes(option)}
          value={option}
        />
      ))}
    </>
  );
};

You can check in my codesandbox

answered Jul 12 '22 at 07:51

iamhuynq

5,357
1
13
36

1

Hello @iamhuynq Thanks a lot, it works according to the situation I posted, but it's a bit more complicated because I'm using react-hooks-form with Material-UI. and i could not work the solutions in the answers you gave above with Material Ui. I recreated the code in CodeSandBox. I hope there is a solution https://codesandbox.io/s/muddy-night-3gfto0?file=/src/App.js – Ibrahim Yolbir Jul 12 '22 at 10:15
ohh, i'll check – iamhuynq Jul 12 '22 at 10:16
1

so what i want to do in this case When I tick the 2nd or 3rd checkbox, the 1st checkbox will be automatically marked only for group2 chekboxes – Ibrahim Yolbir Jul 12 '22 at 10:19
1

You can use [setValue](https://react-hook-form.com/api/useform/setvalue). Check in my [codesandbox](https://codesandbox.io/s/practical-platform-7ict5p?file=/src/App.js). Hope it help @IbrahimYolbir – iamhuynq Jul 12 '22 at 10:37

score 1 · Answer 2 · answered Jul 12 '22 at 08:10

1

Try adding this on your line 27:

(valueCopy[1] === 'b' || valueCopy[2] === 'c') && (valueCopy.shift(), valueCopy.unshift('a'));

answered Jul 12 '22 at 08:10

Erasmo Hernandez

37
3

Thanks a lot, it works according to the situation I posted, but it's a bit more complicated because I'm using react-hooks-form with Material-UI. and i could not work the solutions in the answers you gave above with Material Ui. I recreated the code in CodeSandBox. I hope there is a solution https://codesandbox.io/s/muddy-night-3gfto0?file=/src/App.js – Ibrahim Yolbir Jul 12 '22 at 10:15
so what i want to do in this case When I tick the 2nd or 3rd checkbox, the 1st checkbox will be automatically marked only for group2 chekboxes – Ibrahim Yolbir Jul 12 '22 at 10:19

Check a checkbox when one is checked react-hook-form

2 Answers2