How to checked/uncheck all checkbox in react js?

Question

1. I want when I checked the child checkbox all the column checkbox should be checked in a row will be check
2. I want if I checked the parent one all the table checkboxes should be check how i implement I need code example if you have Note: I am using functional react component with my custom table created by own not any table library. Thanks every one !

Answer 1

You can do it by this way

Here I am assuming that the data will be in following way:

permissons = [
              {create:false, read:false, edit: true, delete:true}
              {create:false, read: true, edit: false, delete:true}
             ]

const checkAll = (event, index) => {
const { checked } = event.target;
const newPermission = [...permissions];
if (checked === true) {
  // console.log("Checked");
  newPermission[index].create = true;
  newPermission[index].read = true;
  newPermission[index].edit = true;
  newPermission[index].delete = true;
} else if (checked === false) {
  // console.log("Unchecked");
  newPermission[index].create = false;
  newPermission[index].read = false;
  newPermission[index].edit = false;
  newPermission[index].delete = false;
}
setpermissions([...newPermission]);
};

Pass event and index as props in checkAll function.

Answer 2

You can try the following logic for your first requirement. The logic for second Requirement is similar. You can define some hooks for each row to make it cleaner.

const [row, setRow] = useState({ allChecked: true, permissions: [-1, 1, 1, 1, -1, -1, 1]});
// -1 = does not allow change, 0 = unchecked, 1 = checked
// each index represents a permission, you can use enum to make it clearer

useEffect(() => {
    // for update child checkbox
    if (row.allChecked && row.permissions.includes(0) {
        let updatePermission = ow.permissions.map(permission => permission || 1); // if permission is 0 it will be changed to 1
        let updateRow = Object.assign({}, row);
        updateRow.permission = updatePermission;
        setRow(updateRow);
    }
}, [row]}

useEffect(() => {
    let updateRow = Object.assign({}, row);
    // for update permission checkboxs
    if (!row.permissions.includes(0) && !row.allChecked) {
        updateRow.allChecked = true;
        setRow(updateRow);
    } else if (row.permssions.includes(0) && row.allChecked {
        updateRow.allChecked = false;
        setRow(updateRow);
    }
}, [row]);

Answer 3

You need to create a pattern for row and column For instance For every row add index of row to each checkbox class like checkbox_${index}

Use queryselectorAll to target them and just trigger click

document.querySelectorAll(`row_${index}`).forEach(el=>el.click())

Similar the case for all checkbox in a column.