Estoy usando reactjs y tengo el siguiente código de simulación que se simplifica para comprender mejor mi pregunta:
<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>Mi pregunta es cómo escribo la función selectHandler para seleccionar todas las casillas de verificación según el Grupo. Por ejemplo, si el usuario hace clic en el Grupo 1, se seleccionarán todas las casillas de verificación kw1, kw2 y kw3. Y cuando el usuario haga clic en el Grupo 2, se seleccionarán todas las casillas de verificación tr1, tr2 y tr3. Cuando vuelvan a hacer clic en el Grupo 1 o el Grupo 2, las casillas de verificación se anularán según el Grupo, respectivamente.
Hay un paquete simple que resuelve este problema grouped-checkboxes .
En su caso, la función de renderizado se verá así:
<CheckboxGroup> Select All: <AllCheckerCheckbox /><br/> <Checkbox id="option-0" /><br/> <Checkbox id="option-1" /><br/> <Checkbox id="option-2" /><br/> </CheckboxGroup>Diría que deberá adjuntar un accesorio marcado a sus entradas para que pueda mantener el estado por separado en los elementos de la interfaz de usuario. De esa manera, puede establecer su estado mediante programación en una función separada.
EDITAR:
Ok, incorporé esto a stackblitz, parece que tuve algunos errores ortográficos: https://stackblitz.com/edit/react-vcqqif?file=src/App.js
const CheckBoxGroup = () => { const [checked, setChecked] = React.useState({ tr1: false, tr2: false, tr3: false, }); function handleSelectAll() { setChecked((prevState) => { /** * The following converts the boolen values into an array of primitive * types and checks the length against the selected. If all selected then * deselect, otherwise select all. */ const stateValues = Object.values(prevState); const fullLength = stateValues.length; const selectedLength = stateValues.filter( (selectedState) => selectedState ).length; if (fullLength === selectedLength) { return { tr1: false, tr2: false, tr3: false, }; } return { tr1: true, tr2: true, tr3: true, }; }); } function handleClick(id) { setChecked((prevState) => ({ ...prevState, [id]: !prevState[id], })); } return ( <> <button onClick={handleSelectAll}>Select Group 2</button> <ul> <li> <input type="checkbox" id="tr1" name="Group2[]" value="tr1" checked={checked.tr1} onClick={() => handleClick('tr1')} /> </li> <li> <input type="checkbox" id="tr2" name="Group2[]" value="tr2" checked={checked.tr2} onClick={() => handleClick('tr2')} /> </li> <li> <input type="checkbox" id="tr3" name="Group2[]" value="tr3" checked={checked.tr3} onClick={() => handleClick('tr3')} /> </li> </ul> </> ); };