Best Approach for a "Check All"/"Uncheck All" Button

[zwhitchcox]

I have a list of steps for a user to check which ones they want, but I want to add a "Check All" and "Uncheck All" button. I've got this approach, and it works, but I'm wondering if it's best practice:

	const handleCheckAll = () => {
		if (!formRef.current) return;
		const checkboxes = formRef.current.querySelectorAll<HTMLInputElement>(
			`input[name="${fields.steps.name}"]`,
		);
		checkboxes.forEach((cb) => {
			if (!cb.checked) {
				cb.checked = true;
				cb.dispatchEvent(new InputEvent("input", { bubbles: true }));
			}
		});
	};

	const handleUncheckAll = () => {
		if (!formRef.current) return;
		const checkboxes = formRef.current.querySelectorAll<HTMLInputElement>(
			`input[name="${fields.steps.name}"]`,
		);
		checkboxes.forEach((cb) => {
			if (cb.checked) {
				cb.checked = false;
				cb.dispatchEvent(new InputEvent("input", { bubbles: true }));
			}
		});
	};

I was using useInputControl, but it was in a callback and broke the rules of hooks.

[zwhitchcox]

Better way:

	const handleCheckAll = () => {
		form.update({ name: fields.steps.name, value: stepOptions });
	};

	const handleUncheckAll = () => {
		form.update({ name: fields.steps.name, value: [] });
	};