如何实现Radio button的循环式键盘上下箭头切换功能？

算力阿峰

2026-8-12

自定义Radio按钮键盘导航实现方案

解决思路

监听Radio按钮的键盘按下事件，拦截上下箭头操作，针对propulsion和off这两个选项设置专属跳转逻辑，其他选项仍保留默认的上下切换行为。

原生JavaScript实现代码

// 替换成你的Radio组的name属性值
const RADIO_GROUP_NAME = 'your-radio-group';
const radioButtons = document.querySelectorAll(`input[name="${RADIO_GROUP_NAME}"]`);

radioButtons.forEach(radio => {
  radio.addEventListener('keydown', (event) => {
    // 只处理上下箭头按键
    if (!['ArrowUp', 'ArrowDown'].includes(event.key)) return;

    const currentValue = event.target.value;
    let targetRadio = null;

    // 执行自定义跳转逻辑
    if (currentValue === 'propulsion' && event.key === 'ArrowDown') {
      targetRadio = document.querySelector(`input[name="${RADIO_GROUP_NAME}"][value="off"]`);
    } else if (currentValue === 'off' && event.key === 'ArrowUp') {
      targetRadio = document.querySelector(`input[name="${RADIO_GROUP_NAME}"][value="propulsion"]`);
    }

    // 找到目标按钮后，切换选中状态并聚焦，同时阻止默认行为
    if (targetRadio) {
      event.preventDefault();
      targetRadio.checked = true;
      targetRadio.focus();
    }
  });
});