Layui表单赋初值之 checkbox

作者: 李广46656
来源: 51数据库
2021-11-01

问题来源

上回书说到，layui 在提交表单时对 checkbox 进行验证，这次依旧是 checkbox，跟它杠上了。
在网页中有很多时候会用到表单赋初值，layui 给我们提供了非常便利的方法： form.val()，但是，这个方法是有一定局限的，例如在使用这个方法给 checkbox 赋初值时就没有成功（至少我没有），但是我又需要用到，google 也没找到觉得合适的答案，大多数都说这个需要自行扩展，所以...

解决方法

毫无疑问，最终还是自行扩展，代码：

(假设 html 代码还是上一篇文章写到的代码，不知道？没关系，link: layui提交表单时验证必选的多选框是否有选中)

// 假设 data 是后台获取的值，数组中的值是与 checkbox 的 value 对应的
let data = [1, 2, 3, 4];
$.each(data, (v) => {
    // 获取 type 为 checkbox，name 以 test 开关，value 为 v 的元素
    let node = $(`input[type="checkbox"][name^="test"][value="${v}"]`);
    if (node && node.length) {
        // 如果元素存在，使其选中
        node[0].checked = true;
        // 这个不能忘了
        form.render();
    }
});

注意

在获取元素的时候，要使用 [attribute^=value] 选择器 the [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。
form.render() 不能忘了，我们在使用 layui 进行布局时，看到的 checkbox 和 radio 已经不是真实的了 (>_<)。