如何使用嵌套在标签class="...“中的input type =复选框在背景图像之间切换？

<div class="image-switcher">
  <input type="checkbox" id="image-checkbox">
  <label for="image-checkbox"></label>
</div>

.image-switcher {
  position: relative;
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  width: 500px;
  height: 300px;
}

.image-switcher input[type="checkbox"]:checked + label {
  background-image: url('path/to/checked-image.jpg');
}

const checkbox = document.querySelector('#image-checkbox');
const imageSwitcher = document.querySelector('.image-switcher');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    imageSwitcher.style.backgroundImage = "url('path/to/checked-image.jpg')";
  } else {
    imageSwitcher.style.backgroundImage = "url('path/to/default-image.jpg')";
  }
});