layui单选框怎么增加点击波纹效果-Layui教程-PHP中文网

layui radio 无内置波纹效果，需手动在 .layui-form-radio 上监听 click、动态插入并动画移除 ripple 元素；表格中需适配 .layui-table-box 容器及事件穿透，兼顾移动端、虚拟滚动等兼容性问题。

layui单选框怎么增加点击波纹效果

layui radio 没有内置波纹效果，得自己加

Layui 的 radio 是纯语义化表单控件，渲染后就是原生 <input type="radio"> + 自定义样式包裹层，它本身不带 Material 风格的点击波纹（ripple）。官方没提供开关，CSS 类里也没有 ripple 相关样式。想加，必须手动注入 DOM 元素和动画逻辑。

在 radio 外层容器上监听 click 并动态插入波纹元素

不能直接给 input 绑事件——它不可见；也不能改 layui 内部渲染逻辑（易崩且升级即失效）。正确做法是：找到 radio 所在的可点击区域（通常是 .layui-form-radio 或其父 .layui-form-item），在 click 时计算坐标、插入 <span class="ripple"></span>，再用 CSS 动画驱动扩散。

确保 radio 容器有 position: relative（Layui 默认已有）
监听的是 .layui-form-radio 的 click，不是 input 本身
波纹 span 要设 position: absolute、border-radius: 50%、transform: translate(-50%, -50%)
动画用 @keyframes ripple 控制 scale 和 opacity，持续时间建议 400–600ms
动画结束后用 remove() 清理 DOM，避免内存堆积

// 示例：给所有 radio 添加波纹
$('.layui-form-radio').on('click', function(e) {
  const $this = $(this);
  const rect = $this[0].getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
<p>const $ripple = $('<span class="ripple"></span>')
.css({ left: x + 'px', top: y + 'px' });</p><p>$this.append($ripple);</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro"><img
														src="https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png" alt="深蓝色网站后台管理系统layui框架模板-AdminPro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="overflowclass">深蓝色网站后台管理系统layui框架模板-AdminPro</a>
													<p class="overflowclass">一款深蓝色网站后台管理系统layui框架模板</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/7535" title="深蓝色网站后台管理系统layui框架模板-AdminPro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p>setTimeout(() => $ripple.remove(), 600);
});
</p>