layui首个版本发布于2016年秋，它区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

在网页中有很多时候会用到表单赋初值，Layui给我们提供了非常便利的方法：form.val()，但是，这个方法是有一定局限的，例如在使用这个方法给checkbox赋出值时就没有成功，但是又需要用到，Google也没找到觉得合适的答案，大多数都说这个需要自行扩展，所以...

解决方法

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

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

//假设data是后台获取的值，数组中的值是与checkbox的value对应的。

　　letdata=[1,2,3,4];

　　$.each(data,(v)=>{

　　//获取type为checkbox，name以test开关，value为v的元素

　　letnode=$(`input[type="checkbox"][name^="test"][value="${v}"]`);

　　if(node&&node.length){

　　//如果元素存在，使其选中

　　node[0].checked=true;

　　//这个不能忘了

　　form.render();

　　}

　　});

注意

1、在获取元素的时候，要使用[attribute^=value]选择器The[attribute^=value]选择器匹配元素属性值带指定的值开始的元素。

2、form.render()不能忘了，我们在使用Layui进行布局时，看到的checkbox和radio已经不是真实的了。

layui，是一款采用自身模块规范编写的前端UI框架，遵循原生Html/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。

以上就是酷仔今日整理的“Web前端教程：Layui表单赋初值之checkbox怎么解决”，希望为正在学习Web前端的同学提供帮助。