Web前端：Layui表单赋初值之checkbox

作者:不合格的小书虫更新于： 2020-04-07 21:47:29

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

　　问题来源

　　上回书说到，Layui在提交表单时对checkbox进行验证，这次依旧是checkbox，跟它杠上了。

　　在网页中有很多时候会用到表单赋初值，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]选择器匹配元素属性值带指定的值开始的元素。

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

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