如何让基于Checkbox Label的切换按钮支持空格键与回车键交互？

核心思路 #

给label元素添加键盘事件监听器，捕获空格键（keyCode 32）和回车键（keyCode 13），手动切换checkbox的选中状态并触发change事件，联动你的内容切换逻辑。

修改后的代码 #

HTML（保持原结构即可）

<div>
     <input type="checkbox" id="toggle" class="toggle" name="checkbox">
     <label for="toggle" id="label" tabindex="0"></label>
</div>

JavaScript

const checkbox = document.getElementById("toggle");
const label = document.getElementById("label");

const basic = document.getElementById("basic");
const professional = document.getElementById("professional");
const master = document.getElementById("master");

function toggleContent () {
  if (this.checked) {
    basic.innerHTML = "19.99";
    professional.innerHTML = "24.99";
    master.innerHTML = "39.99";
  } else {
    basic.innerHTML = "199.99";
    professional.innerHTML = "249.99";
    master.innerHTML = "399.99";
  }  
}

checkbox.addEventListener('change', toggleContent);

// 处理label的键盘交互
label.addEventListener('keydown', function(e) {
  // 匹配空格键或回车键
  if (e.keyCode === 32 || e.keyCode === 13) {
    e.preventDefault(); // 阻止默认行为（比如空格触发页面滚动）
    checkbox.checked = !checkbox.checked; // 切换checkbox状态
    checkbox.dispatchEvent(new Event('change')); // 手动触发change事件执行切换逻辑
  }
});

关键说明 #

• 之前的尝试失效，大概率是因为只调用了切换函数但没正确触发checkbox的change事件，或者事件绑定逻辑有误。这里直接操作checkbox的checked状态后手动派发change事件，确保toggleContent能正常执行。
• e.preventDefault()是为了避免空格键触发页面滚动的默认行为，优化键盘操作体验。
• 保留label的tabindex="0"，确保键盘能正常聚焦到该元素。

内容的提问来源于stack exchange，提问作者user21617887