layui单选框原生不支持键盘切换，需手动实现：先渲染并设置tabindex，再监听方向键/空格切换选中状态，修改后调用form.render('radio')并触发对应事件。
layui单选框原生不支持键盘切换，必须手动实现
layui 的 radio 组件默认只响应鼠标点击，Tab 键能聚焦到第一个单选按钮，但 ↑/↓ 或 Space 都不会触发切换。这不是 bug，是 layui 2.x 的设计限制——它没给单选组绑定键盘事件委托。
用 form.on('radio(filter)') 捕获点击后，再补键盘逻辑
核心思路是：监听单选组的点击事件（form.on('radio(IndicatorType)')），同时在 DOM 上监听 keydown，当焦点落在该组任意 input[type="radio"] 上时，用方向键或空格控制选中状态，并主动触发 layui 的 radio 事件。
- 必须确保所有 radio 都在同一个
name下，且包裹在class="layui-form"容器内 - 监听
keydown时，要判断e.target是否属于该组：e.target.name === 'IndicatorType' - 按
↑/↓时，需遍历同 name 的所有 radio，找到当前选中项，再定位上下一个；按Space时直接切换当前项的checked状态 - 修改 DOM 后必须调用
form.render('radio')，否则 UI 不更新 - 最后手动触发一次
form.on('radio(...)')对应的事件，保证业务逻辑（比如联动时间控件）正常执行
容易踩的坑：focus 状态、渲染时机和事件冒泡
键盘操作依赖 focus，但 layui 渲染后 radio 的 tabindex 默认为 -1，导致 Tab 键无法顺序进入。需要在 form.render() 后手动补上：
layui.$('input[name="IndicatorType"]').attr('tabindex', '0');另外，form.render('radio') 会重写 DOM，覆盖你加的 tabindex，所以这行代码得放在 form.render() 之后、且每次渲染后都要重设。
- 不要在
form.on('radio(...)回调里直接改e.target.checked——layui 会拦截并重置 - 避免用
document.addEventListener('keydown', ...)全局监听，容易和其他组件冲突；推荐用layui.$('.layui-form').on('keydown', 'input[name="IndicatorType"]', ...) - 按
Enter键默认会提交表单，记得e.preventDefault()
实际可用的最小闭环示例
假设你的单选组 lay-filter 是 IndicatorType，name 是 IndicatorType：
layui.use(['form'], function(){
var form = layui.form, $ = layui.$;
form.render('radio'); // 先渲染
$('input[name="IndicatorType"]').attr('tabindex', '0'); // 补 tabindex
<p>$(document).on('keydown', 'input[name="IndicatorType"]', function(e){
var radios = $('input[name="IndicatorType"]'),
idx = radios.index(this),
nextIdx, target;</p><pre class='brush:php;toolbar:false;'>if(e.keyCode === 38){ // ↑
nextIdx = idx === 0 ? radios.length - 1 : idx - 1;
} else if(e.keyCode === 40){ // ↓
nextIdx = idx === radios.length - 1 ? 0 : idx + 1;
} else if(e.keyCode === 32){ // Space
e.preventDefault();
this.checked = !this.checked;
form.render('radio');
return;
} else {
return;
}
e.preventDefault();
target = radios.eq(nextIdx)[0];
target.checked = true;
form.render('radio');
// 手动触发 radio 事件
form.on('radio(IndicatorType)', {elem: target, value: target.value});}); });
这段代码没封装成通用函数，因为不同单选组的 name 和 filter 值不同，硬编码反而更可控。真正麻烦的不是逻辑，而是每次 form.render() 后 tabindex 丢失、以及事件触发后是否要同步更新关联控件（比如 laydate 的范围）——这些得根据你自己的业务链路一个个对齐。
