How can I track a toggle's state without letting the page get out of sync?

Treat the checkbox’s live checked property as the source of truth. In its change handler, read event.currentTarget.checked and render the notice from that value. For a checkbox, checked is a Boolean representing its current state; the HTML checked attribute describes the initial markup and does not track later changes. [S1]

Here is a small standalone example. The initial render also handles a checkbox that starts checked in the HTML:

<label>
  <input id="notice-toggle" type="checkbox">
  Show the notice
</label>
<p id="notice" hidden>Extra information is visible.</p>

<script>
  const toggle = document.querySelector("#notice-toggle");
  const notice = document.querySelector("#notice");

  function render(isOn) {
    notice.hidden = !isOn;
  }

  toggle.addEventListener("change", (event) => {
    render(event.currentTarget.checked);
  });

  render(toggle.checked);
</script>

A manually flipped variable is a second version of the state. If it doesn’t match the checkbox’s actual state, the notice can disagree with the control. Reading checked avoids guessing what the latest click means: it uses the checkbox’s current value instead. [S1]

In the example, render(isOn) receives the value from the checkbox and sets the notice’s visibility from that value. It does not toggle the notice blindly. Calling render(true) shows the notice, and calling render(false) hides it.

Call the same render function once with toggle.checked after setting up the elements. This synchronizes the notice with the checkbox’s current state at startup, including if you add the checked attribute to make the initial control appear selected. The live property is the value to read for the current state; the initial attribute does not update as the user changes the control. [S1]

Keep the startup call and the event handler using the same render function. That way, initial display and later updates follow one rule instead of having separate setup logic that can drift.

Use this shape: read the actual control state, then derive every related display change from it. Replace the placeholder selector and rendering action with your own page elements:

const toggle = document.querySelector("[your-toggle-selector]");

function render(isOn) {
  // Set related content from isOn; do not flip it blindly.
}

toggle.addEventListener("change", (event) => {
  render(event.currentTarget.checked);
});

render(toggle.checked);

This guidance applies to browser checkbox inputs. It does not establish behavior for custom controls that are not checkbox or radio inputs; for those, use the control’s documented state and event behavior. [S1]