如何在选中复选框时更改已创建列表项的样式？

<ul>
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">列表项1</label>
  </li>
  <li>
    <input type="checkbox" id="item2">
    <label for="item2">列表项2</label>
  </li>
  <li>
    <input type="checkbox" id="item3">
    <label for="item3">列表项3</label>
  </li>
</ul>

input[type="checkbox"]:checked + label {
  /* 在选中复选框时更改列表项的样式 */
  text-decoration: line-through;
  color: gray;
}

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    var label = this.nextElementSibling;
    if (this.checked) {
      label.classList.add('checked');
    } else {
      label.classList.remove('checked');
    }
  });
});