logo

Coding Activist

HomeQuestionsMachine CodingTech RoadmapProductEmber
JobsSign In

Select All Checkboxes

MediumDOM Manipulation20 min5 tests

Build a "Select all" master checkbox that toggles three item checkboxes in sync, reflects partial/full selection state, and shows a live count of selected items.

A common UI pattern is a list of checkboxes with a master "Select all" control at the top. You must implement the two-way relationship between the master checkbox and the individual item checkboxes.

You are given a "Select all" checkbox and three item checkboxes labeled "Item A", "Item B", and "Item C". Implement the following behavior:

  • Clicking "Select all" when it is unchecked should check every item. Clicking it again should uncheck every item.
  • When every item checkbox is checked (by clicking the items individually), "Select all" should automatically become checked.
  • If any item is unchecked while "Select all" is checked, "Select all" should become unchecked.
  • A live status region with role="status" must always show the current count in the form "{n} selected" (for example, "0 selected", "2 selected", "3 selected").

All checkboxes start unchecked, so the initial status reads "0 selected".

Requirements

  • Render a checkbox with the accessible name "Select all" and three item checkboxes with accessible names "Item A", "Item B", and "Item C".
  • Clicking "Select all" checks all three items; clicking it again unchecks all three.
  • When all three items are individually checked, "Select all" automatically becomes checked.
  • Unchecking any item when "Select all" is checked makes "Select all" become unchecked.
  • A role="status" element always displays the number of selected items as "{n} selected".
  • All checkboxes start unchecked and the status starts at "0 selected".
Hints (3)
  1. Derive the "Select all" checked state from the items array (e.g. items.every(Boolean)) instead of storing it separately — this keeps the master checkbox in sync automatically.
  2. Keep item checked states in a single piece of state, like an array of three booleans, and compute the count and the master state from it on every render.
  3. For the master checkbox onChange, set every item to the new checked value; for an item onChange, update only that index.

Topics

  • React
  • DOM Manipulation

Asked at

Rapido · Atlassian · Meesho · Delhivery · Google · CRED

Join Us
blur