<think>嗯，用户问的是如何在
Layui中使用
radio单选框，需要给出使用方法和示例。首先，我应该回忆一下
Layui的文档和相关知识。
Layui是一个前端框架，它的表单组件需要渲染才能正确
显示样式。记得用户提供的引用中有提到，如果单选框
不显示可能是因为没有渲染表单，所以必须调用form.render
()。
然后，用户可能想要基本的用法，包括HTML结构、初始化和事件处理。根据引用里的例子，比如引用3和4，
Layui的单选框需要放在
layui-form-item和
layui-input-block的div里，每个
radio要有name、value、title等属性，checked属性可以设置默认选中。
接下来，初始化部分可能需要用
layui.use来
加载form模块，并在回调函数里进行渲染。还有，设置初始值的话，可能需要用form.val来赋值，
不过对于
radio，可能需要用jQuery来设置checked属性，或者根据引用来判断是否有更好的方法。比如引用5提到在弹出层后要重新渲染表单，所以在
动态加载内容时需要注意这一点。
事件处理方面，用户可能需要知道如何监听单选框的变化。
Layui的form.on
('
radio(filterName
)'
)可以监听
radio的切换，并在回调里处理逻辑。
然后，常见问题可能包括单选框
不显示，这时候需要检查是否调用了form.render
()，或者是否有未正确渲染的情况，比如
动态添加元素后没有重新渲染。引用5提到这种情况的
解决方法，所以应该在回答中提醒用户注意渲染时机。
最后，生成相关问题的时候，可以考虑
Layui单选框的样式自定义、
动态赋值、与单选组的区别以及与其他框架的对比，这样能帮助用户进一步了解相关知识。
需要确保回答的结构清晰，分步骤说明，并给出代码示例。同时，引用中的信息要正确标注，比如引用3和5提到的渲染问题，引用4的HTML结构示例。可能还要注意代码中的转义字符，比如用户提供的引用中有HTML代码的转义，但在回答中要正确展示代码块，避免错误。</think>###
Layui单选框使用方法及示例
#### 一、基础用法
1. **HTML结构**
在`class="
layui-form"`的容器内，使用`
layui-form-item`包裹单选框组。每个单选框需设置`type="
radio"`、相同的`name`属性以及
不同的`value`和`title`：
```html
<div class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">性别</label>
<div class="
layui-input-block">
<input type="
radio" name="sex" value="男" title="男">
<input type="
radio" name="sex" value="女" title="女" checked>
</div>
</div>
</div>
```
2. **初始化渲染**
通过`
layui.use`
加载form模块并调用`form.render
()`进行样式渲染[^3][^5]：
```javascript
layui.use
('form', function
(){
var form =
layui.form;
form.render
(); // 关键：渲染表单
}
);
```
#### 二、设置初始值
可通过以下两种方式：
1. **HTML属性直接赋值**
在`input`标签中
添加`checked`属性：
```html
<input type="
radio" name="sex" value="女" title="女" checked>
```
2. **
动态赋值**
使用jQuery或原生JS设置选中状态后重新渲染：
```javascript
$
('input[name=sex][value=女]'
).prop
('checked', true
);
form.render
('
radio'
); // 仅渲染单选框
```
#### 三、监听选择事件
通过`form.on
('
radio(filter
)'
)`捕获选择动作：
```javascript
form.on
('
radio(sex
)', function
(data
){
console.log
("选中值:", data.value
); // 输出：女
}
);
```
#### 四、常见问题
解决
1. **单选框
不显示**
- 确保已调用`form.render
()`[^5]
- 检查HTML结构是否符合规范（如`
layui-form-item`层级）[^3]
-
动态加载内容时需在元素插入后重新渲染[^5]
2. **
动态修改选项后失效**
调用`form.render
('
radio'
)`重新渲染组件。
#### 五、完整示例
```html
<div class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">升级方式</label>
<div class="
layui-input-block">
<input type="
radio" name="upModel" value="0" title="普通">
<input type="
radio" name="upModel" value="1" title="强制升级">
</div>
</div>
</div>
<script>
layui.use
(['form', 'jquery'], function
(){
var form =
layui.form,
$ =
layui.jquery;
// 初始渲染
form.render
();
// 事件监听
form.on
('
radio(upModel
)', function
(data
){
layer.msg
('当前选中：'+ data.value
);
}
);
//
动态设置默认值
setTimeout
(function
(){
$
('input[name=upModel][value=1]'
).prop
('checked', true
);
form.render
('
radio'
);
}, 1000
);
}
);
</script>
```
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
