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
– DecPK, Commented Jul 12, 2022 at 7: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
– Ibrahim Yolbir, Commented Jul 12, 2022 at 7:42

iamhuynq · Accepted Answer · 2022-07-12 07:51:08Z

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, 2022 at 7:51

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ibrahim Yolbir Over a year ago

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 codesandbox.io/s/muddy-night-3gfto0?file=/src/App.js

iamhuynq Over a year ago

ohh, i'll check

Ibrahim Yolbir Over a year ago

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

iamhuynq Over a year ago

You can use setValue. Check in my codesandbox. Hope it help @IbrahimYolbir

Erasmo Hernandez · Accepted Answer · 2022-07-12 08:10:51Z

1

Try adding this on your line 27:

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

answered Jul 12, 2022 at 8:10

Erasmo Hernandez

373 bronze badges

2 Comments

Ibrahim Yolbir Over a year ago

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 codesandbox.io/s/muddy-night-3gfto0?file=/src/App.js

Ibrahim Yolbir Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related