打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Layui表单赋初值之 checkbox

问题来源

上回书说到,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();
    }
});

注意

  1. 在获取元素的时候,要使用 [attribute^=value] 选择器 The [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素
  2. form.render() 不能忘了,我们在使用 Layui 进行布局时,看到的 checkboxradio 已经不是真实的了 (>_<)。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
Layui提交表单时验证必选的多选框是否有选中
前端|Layui实现表单
『jQuery』.html(),.text()和.val()的概述及使用
php中一个完整表单处理实现代码
帝国CMS替换编辑器为百度编辑器的方法:插件形式!改动量超少!
支持Html5的Jquery表单验证
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服