layui单选按钮点击改变单选按钮里面圆的颜色
时间: 2024-04-24 15:04:10 浏览: 89
点击或自动改变圆的颜色
5星 · 资源好评率100%
你可以使用 layui 的 form 模块的 on() 方法监听单选按钮的点击事件,然后通过 jQuery 改变选中单选按钮的样式来改变圆的颜色。具体操作步骤如下:
1. 给单选按钮添加 lay-filter 属性,用于监听点击事件。
```html
<input type="radio" name="sex" value="男" title="男" lay-filter="sex">
<input type="radio" name="sex" value="女" title="女" lay-filter="sex">
```
2. 使用 layui 的 form.on() 方法监听单选按钮的点击事件。
```javascript
layui.use('form', function(){
var form = layui.form;
// 监听单选按钮点击事件
form.on('radio(sex)', function(data){
// 获取选中的单选按钮
var checked = $(data.elem).parents('.layui-form-radio').find('.layui-anim');
// 改变选中单选按钮的样式
checked.css('background-color', '#5FB878');
});
});
```
上述代码中,我们首先使用 layui.use() 方法加载 form 模块,然后使用 form.on() 方法监听单选按钮点击事件。当单选按钮被点击时,我们使用 jQuery 找到选中单选按钮对应的样式元素,然后改变其背景颜色即可。
阅读全文