layui动态添加复选框
时间: 2023-09-13 12:13:53 浏览: 689
在 layui 中,可以通过动态创建 HTML 元素的方式来实现动态添加复选框。下面是一个示例代码:
```javascript
// 获取复选框容器元素
var checkboxContainer = document.getElementById("checkbox-container");
// 创建复选框元素
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "checkbox-name";
checkbox.value = "checkbox-value";
checkbox.title = "复选框标题";
// 将复选框元素添加到容器中
checkboxContainer.appendChild(checkbox);
// 重新渲染复选框
layui.form.render("checkbox");
```
在上面的代码中,我们首先通过 `document.getElementById()` 方法获取了复选框容器元素,然后通过 `document.createElement()` 方法创建了一个新的复选框元素。接着,我们设置了复选框的各个属性,例如 `type`、`name`、`value`、`title` 等。最后,我们将复选框元素添加到容器中,并调用 `layui.form.render()` 方法重新渲染复选框,使其生效。
需要注意的是,上述代码只是添加了一个复选框元素,如果需要批量添加复选框,可以通过循环来实现。另外,如果需要动态删除复选框,可以使用 `removeChild()` 方法将复选框从容器中删除。
阅读全文
相关推荐
问题描述
1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消
2.有分页时,最后一页数据过少会导致其他页下方数据无法选中
3.页面没加载完或暴力测试时也会不能选中
利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法——自己写一个复选框
<!--原有layui复选框-->
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id=