如何在选中复选框的情况下在文本中划线

<input type="checkbox" id="checkbox">
<p>
  <span id="text">这是需要划线的文本。</span>
</p>

const checkbox = document.getElementById('checkbox');
const text = document.getElementById('text');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    text.style.textDecoration = 'line-through';
  } else {
    text.style.textDecoration = 'none';
  }
});

p {
  font-size: 16px;
}

span {
  cursor: pointer;
}