checkbox 全选问题!

未结贴
6 132
正常的使用layui 写checkbox全选会遇到两个问题:
1.自己修改了checkbox的checked值,然后用form.render('checkbox')更新会出现点两次之后render渲染失败了!
2.不用render重新渲染checkbox,自己给checkbox样式加上 layui-form-checkbox ,全选是可以了,但是全选后的checkbox 需要点击两次才能取消!

  • 放逐之魚 放逐之魚
    2017-02-17 15:41:42
    贴代码看看
    0 回复
  • xuffy xuffy
    2017-02-17 15:50:21
    查看了layui源码 发现第一个问题render渲染失败可能是render最后的判断逻辑也许有问题。

    我又看了form复选框源码


    发现源码①的地方是在监听事件前获取了checkbox元素,这样就有可能出现,开发者去修改了checkbox的checked值,但是源码还是读取之前的checkbox元素。
    所以这里①的代码应该放在②的位置,每次都去重新获取checkbox元素。(建议)

    但是可以在保证不改源码也可以实现,你要去对全选的每个checkbox多加一句checked = true才行(需要循环添加)


    纠结了大半天的BUG解决了[困]
    0 回复
  • xuffy xuffy
    2017-02-17 15:51:40
    @放逐之魚 更新了
    0 回复
  • 放逐之魚 放逐之魚
    2017-02-17 16:03:40
    @xuffy 你是怎么修改checked值的,用attr么
    0 回复
  • xuffy xuffy
    2017-02-17 16:28:29
    @放逐之魚 其实你不需要去给checkbox添加checked值
    $('input[type="checkbox"]')[0].checked=true; //或者false 不用去加attr属性
    然后把他相邻的样式修改下
    $('input[type="checkbox"]').next('.layui-form-checkbox').removeClass('layui-form-checked')
    或者
    $('input[type="checkbox"]').next('.layui-form-checkbox').addClass('layui-form-checked')

    就可以了
    0 回复
  • Aries Aries
    2天前
    @xuffy 有个问题,这边自己写双击事件,把checkbox打上勾后(通过加layui的类名layui-form-cheked使其打上勾),这个时候就有问题了,再次点击时打的勾不能取消,得等到第二次才能取消
    0 回复
最近热帖
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 1385
一个为您省时省力的后台模板jqadmin 1048
meTools - 基于layui+vue的在线工具网站 952
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 879
你的案例或技术分享,将会被置顶推荐 825
LayuiHelp,一个良心插件,为你的代码插上翅膀! 737
LayUI SELECT 多级级联实现,理论上是无限级的 582
Admin-Template 后台模板(开发中...) 510
基于TP5加Layui的轻社区系统,争取下个月上线 291
laypage分页模块扩展之pagesize.js(layui2.0不知道会不会有这个功能) 214
近期热议
一个为您省时省力的后台模板jqadmin 24
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
遮罩通过parent 可以全屏,但窗口不能传值了? 12
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
select联动初始化数据form.render();不能逐个渲染的问题。 11
为什么layui分页只有一页的情况下不无法显示组件呢? 11