如何修改回车键、上下箭头键的行为以适配多个单选按钮组？

我明白你需要给这个面向医护人员的离线决策工具优化键盘操作体验——毕竟默认快捷键太不直观了。下面我来帮你补全键盘事件处理的代码，完美实现你要的两个功能：

核心修改说明 #

1. 回车键（Enter）：当焦点在单选按钮上时，直接选中该选项并触发后续的问题切换逻辑，完全替代Space键的作用
2. 上下箭头键：
   • 下箭头（↓）：切换到下一个可见问题的第一个单选按钮，模拟Tab键的跳转
   • 上箭头（↑）：切换到上一个可见问题的第一个单选按钮，模拟Shift+Tab的跳转

修改后的完整键盘事件代码 #

直接替换你原来的window.addEventListener('keydown', function (e) { ... })部分即可：

window.addEventListener('keydown', function (e) {
    // Process e object
    var key = e.which
    if (e.ctrlKey)  { key = "ctrl"+key;     }
    if (e.altKey)   { key = "alt"+key;      }
    if (e.shiftKey) { key = "shift"+key;    }

    // ESC - a test
    if (key == "27") {
        // window.close();
        return;
    }

    // Ctrl+C
    if (key == "ctrl67") {
        // Preserve default
        return;
    }

    // Ctrl+F
    if (key == "ctrl70") {
        // Preserve default
        return;
    }

    // Radio Button Shortcuts

    // Space
    if (key == "32") {
        // Preserve default
        return;
    }

    // TAB
    if (key == "9") {
        // Preserve default
        return;
    }

    // Shift+TAB
    if (key == "shift9") {
        // Preserve default
        return;
    }

    // LeftArrow
    if (key == "37") {
        // Preserve default
        return;
    }

    // RightArrow
    if (key == "39") {
        // Preserve default
        return;
    }

    // Enter - 选中当前单选并触发切换逻辑
    if (key == "13") {
        if($("input[type=radio]").is(':focus')){
            e.preventDefault();
            // 选中当前焦点的单选按钮
            $(e.target).prop('checked', true);
            // 触发对应的onchange事件，执行问题切换
            $(e.target).trigger('change');
        } else {
            return;
        }
    }

    // DownArrow - 跳转到下一个可见问题的单选组
    if (key == "40") {
        if($("input[type=radio]").is(':focus')){
            e.preventDefault();
            const currentQuestion = $(e.target).closest('.Q');
            // 找到当前问题之后第一个可见的问题容器
            const nextQuestion = currentQuestion.nextAll('.Q:visible').first();
            if (nextQuestion.length > 0) {
                // 聚焦到下一个问题的第一个单选按钮
                nextQuestion.find('input[type=radio]').first().trigger('focus');
            }
        } else {
            return;
        }
    }

    // UpArrow - 跳转到上一个可见问题的单选组
    if (key == "38") {
        if($("input[type=radio]").is(':focus')){
            e.preventDefault();
            const currentQuestion = $(e.target).closest('.Q');
            // 找到当前问题之前第一个可见的问题容器
            const prevQuestion = currentQuestion.prevAll('.Q:visible').first();
            if (prevQuestion.length > 0) {
                // 聚焦到上一个问题的第一个单选按钮
                prevQuestion.find('input[type=radio]').first().trigger('focus');
            }
        } else {
            return;
        }
    }

    // 禁用其他未处理的快捷键
    e.preventDefault();
});

关键逻辑解释 #

• 回车键处理：直接通过prop('checked', true)选中当前焦点的单选按钮，然后用trigger('change')触发你已经写好的问题切换函数，完全复用现有业务逻辑，不需要额外写新的跳转代码
• 上下箭头处理：通过closest('.Q')找到当前单选按钮所在的问题容器，再用nextAll('.Q:visible')和prevAll('.Q:visible')筛选出可见的上/下一个问题，最后聚焦到该问题的第一个单选按钮，确保操作连贯性
• 保留默认快捷键：你原来保留的Ctrl+C、Ctrl+F、Tab等常规快捷键不受影响，兼顾用户的基础操作习惯

备注：内容来源于stack exchange，提问作者Gavin