时间戳

首页 > 解决方案 > 如何选择 Javascript 中的所有复选框？

reactjs - 如何选择 Javascript 中的所有复选框？

问题描述

我是 javscript 的初学者，所以我将感谢您的解释。

 {isolate_list.map((row) => {
                        return (
                          <FormControlLabel
                            control={
                              <Checkbox
                                color="primary"
                                checked={!!checked}
                                onChange={toggleCheckbox}
                                name="checkedA"
                              >
                                {" "}
                              </Checkbox>
                            }
                            label={row.isolatename}
                          >
                            {""}
                          </FormControlLabel>
                        );
                      })}

我有这个按钮

                    <Button
                      onClick={selectall}
                      style={{ margin: 50 }}
                      variant="outlined"
                      label="SELECT ALL ISOLATES"
                    >
                      SELECT ALL ISOLATES
                    </Button>

谁能帮助我如何使用按钮选择所有复选框，同时我可以通过单击单独选择每个复选框？我从这部分开始，但我不确定

 const [checked, setChecked] = React.useState(true);
  const toggleCheckbox = (event) => {
    setChecked(event.target.checked);
  };

标签： reactjs

解决方案

最简单的实现（没有任何表单管理器）：

  1. 声明状态来存储我们检查的 ids 数组。

const [checkedIds, setCheckedIds] = useState([]);

  1. 实现处理程序。
const handleCheck = useCallback((id) => {
  return () => {
    setCheckedIds(prevIds => prevIds.includes(id) ? prevIds.filter(item => item !== id) : [...prevIds, id]);
  };
}, []);
  1. 渲染我们的复选框并应用处理程序。
list.map(({ id, isolatename }) => (
  <FormControlLabel
    key={id}
    control={
      <Checkbox
        color="primary"
        checked={checkedIds.includes(id)}
        onChange={handleCheck(id)}
        name={`checkbox_${id}`}
      />
    }
    label={isolatename}
  />)
))

附言。如果<Checkbox/>props 'onChange' 像这样返回回调，(isChecked: boolean) => {}我们可以简化 (2) 步骤。

const handleCheck = useCallback(id => {
  return isChecked => {
    setCheckedIds(prevIds => isChecked ? prevIds.filter(item => item == id) : [...prevIds, id]);
  };
}, []);

推荐阅读