如何在 Reactjs 中检查是否所有的复选框都被选中？

Question

我是 React 新手，我遇到了一种情况，我的表单上有多个复选框。我希望用户选中所有复选框，然后才启用表单上的提交按钮。在加载时，提交按钮将被禁用。
如何做到这一点？

这是我到目前为止编写的代码：

const MultipleCheckboxes = () => {
  const handleChange = () => {

  }

  const allChecked = () => {

  }

  return (
    <div>
      <form>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value="Java"
            id="languageChkDefault"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Javascript
          </label>
        </div>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value="Angular"
            id="languageChkDefault"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Angular
          </label>
        </div>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value="Python"
            id="languageChkDefault"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Python
          </label>
        </div> <br />
        <button disabled={!allChecked}>Submit</button>
      </form>
    </div>
  );
};

export default MultipleCheckboxes;

有人可以帮我解决这个问题吗？谢谢

Answer 1

您可以使用 React useState 钩子并将其默认值设置为 false。

const [state, setstate] = useState(false)

当用户点击输入框时将状态设置为真。当用户取消选中该框时，您可能会遇到一些问题，因此您可以使用 if 语句来处理状态更改例如：

if (state === true){
setstate(false)
}else{
setstate(true)
}

或者您可以只在 handleChange 函数中使用此代码：

!state

它相应地将状态反转为true/false。

之后你可以在组件内部使用三元运算符来检查用户是否选中了所有的框，如果用户没有选中所有的框，则禁用该按钮，否则执行其他操作。例如，如果状态为真（或者换句话说，如果用户选中了该框），则呈现普通样式的按钮，否则呈现禁用的按钮：

{state? <button className = "styled"/>: <button disabled className="styled"/>}

当然，我只检查了一个输入框的状态。现在您可以通过为每个框声明多个状态来简单地检查多个条件。

{state1 && state2 && state3 ? <button className = "styled"/>: <button disabled className="styled"/>}

如果您还不熟悉三元运算符，您应该阅读此文档 Ternary operators。如果您还没有听说过 useState 和 React 钩子，请随时查看 React 的文档。欢迎来到 React 生态系统！

Answer 2

这是我的解决方案，希望对你有帮助

import { useState, useEffect } from "react";

const MultipleCheckboxes = () => {
  const [allChecked, setAllChecked] = useState(false);
  const [checkboxes, setCheckboxes] = useState({
    javaCheckbox: false,
    angularCheckbox: false,
    pythonCheckbox: false
  });

  function handleChange(e) {
    setCheckboxes({
      ...checkboxes,
      [e.target.id]: e.target.checked
    })
  }

  useEffect(() => {
    const result = Object.values(checkboxes).every(v => v);

    console.log(result);

    setAllChecked(result);
  }, [checkboxes]);

  return (
    <div>
      <form>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value={checkboxes.javaCheckbox}
            id="javaCheckbox"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Javascript
          </label>
        </div>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value={checkboxes.angularCheckbox}
            id="angularCheckbox"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Angular
          </label>
        </div>
        <div className="form-check">
          <input
            type="checkbox"
            className="some-class-name-chk"
            name="someName"
            value={checkboxes.pythonCheckbox}
            id="pythonCheckbox"
            onChange={handleChange}
          />
          <label
            className="form-check-label"
            htmlFor="languageChkDefault"
          >
            Python
          </label>
        </div> <br />
        <button disabled={!allChecked}>Submit</button>
      </form>
    </div>
  );
};

export default MultipleCheckboxes;

如何在 Reactjs 中检查是否所有的复选框都被选中？

How to check whether all the checkboxes are checked in Reactjs?

javascript

jsx

typescript

reactjs