Как при помощи Javascript выделить все чекбоксы одним кликом?

Question

Я просмотрела предыдущие вопросы но не нашла решения, которое бы работало у меня. Задача такова: я получаю с сервера динамический массив с данными (ключи в объектах одинаковые, но значения и длина массива могут меняться). Данные типа

`const users = [
  {"id": 0,"lastName": "Young","name": "Julia"},
  {"id": 1,"lastName": "Annt","name": "Inn"},
  {"id": 2,"lastName": "Ankn","name": "Viktor"}
]`

Данные выводятся в виде таблицы. По клику имя выделенного юзера появляется в подвале таблицы. Я реализовала эту часть, и тут все работает. но теперь мне необходимо выделить все строки таблицы по клику, но я не понимаю, как это сделать

код такой:

  const { getEmployees: getEmployeesProps } = props
  useEffect(() => {
    getEmployeesProps()
  }, [getEmployeesProps])

  const [checkedItems, setCheckedItems] = useState({})

  const handleChange = (event) => {
    const checkedNames = {
      ...checkedItems,
      [event.target.name]: event.target.checked
    }
    setCheckedItems(checkedNames)
    console.log('event', event.target.checked)
    console.log('checkedItems: ', checkedNames)
  }

  const names = Object.keys(
    Object.fromEntries(Object.entries(checkedItems).filter((it) => it[1]))
  ).join(', ')
  
  return (
    <div>
      <Head title="Hello" />
      <div className="flex items-center justify-center h-screen">
        <div className="bg-gray-300 text-white font-bold rounded-lg border shadow-lg">
          <table>
            <tr>
              <thead className="bg-gray-700">
                <tr>
                  <th className="w-1/8 px-4 py-2">
                    <input type="checkbox" onChange={handleCheckAll} />
                  </th>
                  <th className="w-1/4 px-4 py-2">First name</th>
                  <th className="w-1/2 px-4 py-2">Last name</th>
                </tr>
              </thead>
              <tbody className="text-gray-700">
                {props.employees.map((employee) => (
                  <tr key={employee.id}>
                    <td>
                      <input
                        type="checkbox"
                        className="content-center"
                        id={employee.id}
                        name={employee.name}
                        onChange={handleChange}
                      />
                    </td>
                    <td>{employee.name}</td>
                    <td>{employee.lastName}</td>
                  </tr>
                ))}
              </tbody>
            </tr>
          </table>
          <div className="text-gray-700">Users: {names} </div>
        </div>
      </div>
    </div>
  )
}

БЛОГ НА HUSL

Как при помощи Javascript выделить все чекбоксы одним кликом?

Ответы (0 шт):