Layui表单赋初值之 checkbox
程序员文章站
2022-06-22 08:52:39
问题来源 上回书说到,Layui 在提交表单时对 进行验证,这次依旧是 ,跟它杠上了。 在网页中有很多时候会用到表单赋初值,Layui 给我们提供了非常便利的方法: ,但是,这个方法是有一定局限的,例如在使用这个方法给 赋初值时就没有成功(至少我没有),但是我又需要用到,Google 也没找到觉得合 ......
问题来源
上回书说到,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
已经不是真实的了 (>_<)。