在
Layui 中动态设置 `
checkbox` 的选中状态，需要通过 **
Layui 的表单模块**重新渲染，否则直接修改 DOM 或通过 jQuery 操作可能
不会生效。以下是具体方法和示例：
---
### 方法步骤：
1. **获取或设置 `
checkbox` 的 `checked` 属性**
使用 jQuery 或原生 JS 修改 `input[type="
checkbox"]` 的 `checked` 状态。
2. **调用 `
layui.form.render()` 重新渲染**
Layui 的表单元素（如 `
checkbox`、`
radio`、`
select`）需要手动触发渲染才能更新样式和状态。
---
### 示例代码：
#### 1. 动态设置选中状态
```javascript
// 通过 jQuery 设置
checkbox 为选中状态
$('#my
Checkbox').prop('checked', true);
// 通过原生 JS 设置
document.getElementById('my
Checkbox').checked = true;
// 调用
Layui 重新渲染表单
layui.form.render('
checkbox'); // 参数 '
checkbox' 表示只渲染复选框
```
#### 2. 动态生成复选框后渲染
如果是通过 AJAX 或动态插入的 `
checkbox`，需要在插入 DOM 后渲染：
```javascript
// 动态添加
checkbox 到页面
$('#container').html('<input type="
checkbox" id="new
Checkbox" lay-skin="primary">');
// 重新渲染表单
layui.form.render('
checkbox');
```
#### 3. 结合
Layui 的 `form.on()` 监听事件
如果需要监听复选框的变化，使用
Layui 的事件绑定：
```javascript
layui.form.on('
checkbox(myFilter)', function(data) {
console.log(data.elem.checked); // 获取当前选中状态
});
```
对应的 HTML 需添加 `lay-filter`：
```html
<input type="
checkbox" id="my
Checkbox" lay-filter="myFilter" lay-skin="primary">
```
---
### 注意事项：
1. **必须调用 `
layui.form.render()`**
Layui 的表单样式和状态是动态生成的，直接修改 DOM 后需重新渲染。
2. **避免混用 jQuery 和
Layui 的 API**
如果页面已引入 jQuery，可以用 `$('#id').prop('checked', true)`，但最终仍需调用 `
layui.form.render()`。
3. **性能优化**
如果页面有大量表单元素，可以指定渲染类型（如 `'
checkbox'`、`'
select'`）减少
不必要的渲染。
---
### 完整示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Layui 动态设置
Checkbox</title>
<link rel="stylesheet" href="//unpkg.com/
layui@2.6.8/dist/css/
layui.css">
</head>
<body>
<div class="
layui-form">
<input type="
checkbox" id="test
Checkbox" lay-skin="primary" title="动态复选框">
<button class="
layui-btn" onclick="setChecked()">设为选中</button>
</div>
<script src="//unpkg.com/
layui@2.6.8/dist/
layui.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
var form =
layui.form;
var $ =
layui.jquery;
// 初始化渲染
form.render();
// 动态设置选中状态
window.setChecked = function() {
$('#test
Checkbox').prop('checked', true);
form.render('
checkbox'); // 重新渲染
};
});
</script>
</body>
</html>
```
---
本文介绍了一个关于layui框架中登录页面单选按钮不显示的问题及解决方案。当使用layui的表单组件时，原始的select、checkbox、radio等元素会被隐藏并进行美化处理，这需要依赖于form组件。如果遇到单选按钮不显示的情况，确保已加载form模块并执行实例。文章还提到，为了精简layui，删除了lay/modules文件夹，但这样做会导致单选框无法显示，重新加入该文件夹后问题得以解决。
扫一扫
3846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
