React onclick handler for checkbox group-CodePudding

I am using reactjs and I have the following simulation code that is simplify to give better understanding of my question:

     <span onClick={selectHandler}>Select Group 1</span>
    <ul>
      <li>
        <input type="checkbox" id="kw1" name="Group1[]" value="kw1" />
      </li>
      <li>
        <input type="checkbox" id="kw2" name="Group1[]" value="kw2" />
      </li>
      <li>
        <input type="checkbox" id="kw3" name="Group1[]" value="kw3" />
      </li>
    </ul>
    <span onClick={selectHandler}>Select Group 2</span>
    <ul>
      <li>
        <input type="checkbox" id="tr1" name="Group2[]" value="tr1" />
      </li>
      <li>
        <input type="checkbox" id="tr2" name="Group2[]" value="tr2" />
      </li>
      <li>
        <input type="checkbox" id="tr3" name="Group2[]" value="tr3" />
      </li>
    </ul>

My question is how do I write the selectHandler function to select all the checkbox according to Group. Example if user click on Group 1 all the checkboxes kw1, kw2 and kw3 checkboxes will be selected. And when user click on Group 2 all the checkboxes tr1, tr2 and tr3 checkboxes will be selected. When they clicked the Group 1 or Group 2 again, the checkboxes will be deselected according to Group respectively

CodePudding user response：

There is a simple package that solves this problem grouped-checkboxes.

In your case the render function will look like this:

<CheckboxGroup>
  Select All: <AllCheckerCheckbox /><br/>
  <Checkbox id="option-0" /><br/>
  <Checkbox id="option-1" /><br/>
  <Checkbox id="option-2" /><br/>
</CheckboxGroup>

CodePudding user response：

I'd say you'll need to attach a checked prop to your inputs so you can hold the state separately to the ui elements. That way you can programmatically set their state in a separate function.

const checkBoxGroup = () => {
  const [checked, setChecked] = useState({
    tr1: false,
    tr2: false,
    tr3: false,
  });

  function handleSelectAll() {
    setChecked({
      tr1: true,
      tr2: true,
      tr3: true,
    });
  }
  function handleCheck(id) {
    setChecked((prevState) => ({
      ...prevState,
      [id]: !prevState.id,
    }));
  }

  return (
    <>
      <span onClick={handleSelectAll}>Select Group 2</span>
      <ul>
        <li>
          <input
            type="checkbox"
            id="tr1"
            name="Group2[]"
            value="tr1"
            checked={checked.tr1}
            onClick={() => handleCheck("tr1")}
          />
        </li>
        <li>
          <input
            type="checkbox"
            id="tr2"
            name="Group2[]"
            value="tr2"
            checked={checked.tr1}
            onClick={() => handleCheck("tr2")}
          />
        </li>
        <li>
          <input
            type="checkbox"
            id="tr3"
            name="Group2[]"
            value="tr3"
            checked={checked.tr1}
            onClick={() => handleCheck("tr3")}
          />
        </li>
      </ul>
    </>
  );
};