layui如何获取单选框的自定义属性

<p>必须从 data.elem（原始 input 元素）读取 data-* 属性，因 Layui radio 渲染后伪元素无该属性；正确写法为 data.elem.dataset.perm 或 data.elem.getAttribute("data-perm")，且属性须直接写在 input 标签上。</p>

layui radio 选中时怎么读取 data-* 属性

不能靠 data.othis 或渲染后的伪元素读取，必须从原始 input[type="radio"] DOM 节点上取。Layui 的 radio 渲染会把原生 input 隐藏，用 .layui-radio 伪结构模拟 UI，但事件回调里的 data.elem 仍是那个原始 input 元素——这是唯一可靠入口。

常见错误是写成 $(data.othis).attr("data-role")，data.othis 指向的是 <div class="layui-radio"> 容器，它没绑定自定义属性，读出来永远是 undefined。

1. 正确写法：用 data.elem.getAttribute("data-role") 或 data.elem.dataset.role
2. 如果属性名含连字符（如 data-user-id），dataset 对应键名自动转为驼峰（userId）
3. 确保 HTML 中属性已写在原始 input 上，不是加在 label 或外层 div 里

HTML 里怎么写 radio 才能带自定义属性

必须把 data- 属性直接写在 input 标签上，且该 input 必须有 name 和 value，否则 Layui 不识别为一组单选框。

示例：

<div class="layui-form-item"><label class="layui-form-label">角色</label><div class="layui-input-block"><input type="radio" name="role" value="admin" title="管理员" data-perm="full" data-level="1"><input type="radio" name="role" value="editor" title="编辑" data-perm="edit" data-level="2"><input type="radio" name="role" value="viewer" title="查看员" data-perm="read" data-level="3"></div></div>

注意：lay-filter 要加在 form 容器或通过 form.render() 触发初始化，否则监听无效；title 是 Layui 用来渲染显示文本的，不影响自定义属性读取。

监听事件里如何安全获取并使用这些属性

回调函数中 data.elem 就是当前被点击的 input 元素，直接读它的 dataset 或 getAttribute 即可。不需要查 querySelector，也不依赖 jQuery。

1. 推荐用 data.elem.dataset.perm —— 更语义化、自动处理连字符、兼容性好
2. 若需兼容老浏览器（IE10-），改用 data.elem.getAttribute("data-perm")
3. 避免在回调里操作 data.othis 的父节点去反查，容易因 DOM 结构变化失效
4. 动态插入 radio 后，必须调用 form.render('radio')，否则新元素不响应事件，自然也读不到属性

为什么有时候读不到自定义属性？几个典型坑

最常踩的三个点：属性写错位置、没触发重渲染、误用了伪元素。

1. data- 写在 label 上 → 读不到，data.elem 指向的是 input，不是 label
2. 动态添加 radio 后漏掉 form.render('radio') → 事件不绑定，回调根本不会触发
3. 用 $("input[name='role']:checked").data("perm") → jQuery 的 .data() 读的是缓存值，不是实时 DOM 属性，应改用 .attr("data-perm")
4. 在页面加载完成前就执行监听注册 → form.on 失效，属性存在但监听没挂上

真正关键的只有两点：属性必须落在原生 input 上，读取必须通过 data.elem。其余都是围绕这两点的配套动作。