文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     436人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     201人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     163人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     242人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     68人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯