使用layui怎么动态设置checbox 选中状态
发布时间:2023-05-18 22:41:13
在 layui 中,可以使用以下 JS 代码设置 checkbox 的选中状态:
1. 获取 checkbox 对象
首先,需要获取 checkbox 对象。在 layui 中,可以使用 element 模块的方法获取 checkbox 对象。例如:
var $ = layui.$;
var form = layui.form;
var checkbox = $('input[name="test"]');
其中,checkbox 变量表示获取到的 checkbox 对象。
2. 设置 checkbox 的选中状态
设置 checkbox 的选中状态,可以使用 JS 的 checked 属性,例如:
checkbox[0].checked = true; //选中 个 checkbox
3. 刷新渲染
最后,为了让更改生效,需要刷新表单的渲染。在 layui 中,可以使用 form 模块的 render 方法刷新表单的渲染。例如:
form.render('checkbox');
其中,checkbox 表示要渲染的表单元素类型。如果是多个元素类型,可以用一个数组表示,例如 ['checkbox', 'select']。
完整的代码示例:
<!-- HTML 模板 -->
<body>
<div class="layui-form">
<input type="checkbox" name="test" value="1" title="checkbox1">
<input type="checkbox" name="test" value="2" title="checkbox2">
<input type="checkbox" name="test" value="3" title="checkbox3">
</div>
<button id="btn">选中第二个 checkbox</button>
<script src="layui/layui.js"></script>
<script>
// JavaScript 代码
var $ = layui.$;
var form = layui.form;
var checkbox = $('input[name="test"]');
$('#btn').on('click', function() {
checkbox[1].checked = true; //选中第二个 checkbox
form.render('checkbox'); //刷新表单渲染
});
</script>
</body>
以上就是使用 layui 动态设置 checkbox 的选中状态的方法。
