一旦选中一个,在所有TableRow元素上显示复选框

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一旦选中一个,在所有TableRow元素上显示复选框相关的知识,希望对你有一定的参考价值。

我有一个材质用户界面表,我正在向其中添加多选功能。我的要求如下。

  • Checkbox es最初都是隐藏的。 -完成
  • 当悬停在一行上时,其复选框出现。 DONE
  • 一旦检查了一个Checkbox,然后其他行上的所有Checkbox元素将变得始终可见。

我已经完成了前两个要求,但我正在为最后一个要求而苦苦挣扎。

一旦选中其中任何一个复选框,如何显示所有复选框(通过更改opacity

这是到目前为止我要去的地方:

Edit hover-table-row-checkbox

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Checkbox from "@material-ui/core/Checkbox";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  },
  rowSelectionCheckboxStyle: {
    //opacity: "calc(var(--oneRowSelected))",
    opacity: 0,
    "$tableRowStyle:hover &": {
      opacity: 1
    }
  }
});

export default function MyTableComponent(props) {
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>
              <Checkbox className={styles.rowSelectionCheckboxStyle} />
            </TableCell>
            <TableCell>Icon</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.tableRowsData.map(row => {
            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  color:
                    row.icon && row.icon.color
                      ? row.icon.color
                      : DEFAULT_TABLE_ROW_ICON_COLOR
                }}
              />
            );
            return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>
                  <Checkbox className={styles.rowSelectionCheckboxStyle} />
                </TableCell>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

MyTableComponent.propTypes = {
  tableRowsData: PropTypes.array
};

答案

以样式CSS形式输入

.MuiCheckbox-colorSecondary.Mui-checked {
  opacity: 1 ;
}

以上是关于一旦选中一个,在所有TableRow元素上显示复选框的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 选中/未选中复选框上的动态显示和隐藏按钮,反之亦然[关闭]

jQuery属性

如何在重新加载页面时也显示所有选中的复选框?

下一个元素中的 jQuery 计数选中复选框

jQuery:一个按钮,它检查自己的 DIV 中的所有复选框并取消选中所有其他复选框

如果在 Woocommerce 中未选中复选框,则隐藏元素