Web前端：Layui表单赋初值之checkbox
软工小能手
2024-04-23 22:58
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的每一处细节都经过精心雕琢，非常适合界面的快速开发。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
