checkbox 全选问题!

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

回帖
  • xuffy
    2017-2-17
    @放逐之魚 其实你不需要去给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')

    就可以了
    1 回复
  • 贴代码看看
    0 回复
  • xuffy
    2017-2-17
    查看了layui源码 发现第一个问题render渲染失败可能是render最后的判断逻辑也许有问题。

    我又看了form复选框源码


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

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


    纠结了大半天的BUG解决了[困]
    0 回复
  • xuffy
    2017-2-17
    @放逐之魚 更新了
    0 回复
  • @xuffy 你是怎么修改checked值的,用attr么
    0 回复
  • Aries
    2017-3-23
    @xuffy 有个问题,这边自己写双击事件,把checkbox打上勾后(通过加layui的类名layui-form-cheked使其打上勾),这个时候就有问题了,再次点击时打的勾不能取消,得等到第二次才能取消
    0 回复
  • 小阿超
    2017-5-13
    后台模板有分享地址吗?
    0 回复
  • xuffy
    2017-5-15
    @小阿超 https://github.com/Xuffy/layui-WMS
    还在更新...
    0 回复
  • $("#cbx_all").next().click(function (event) {
    if ($('#cbx_all').attr('checked')) {
    $("#cbx_all").removeAttr("checked");
    $("input[name='id[]']").removeAttr("checked");
    $("input[name='id[]']").next().removeClass("layui-form-checked");
    }
    else {
    $("#cbx_all").attr("checked", "checked");
    $("input[name='id[]']").attr("checked", "checked");
    $("input[name='id[]']").next().addClass("layui-form-checked");
    }
    });
    0 回复
  • interlij
    2017-9-12
    我也遇到了相同的问题.
    当我在Form.jsp里
    //表单数据读入 interlij
    Form.prototype.loadData = function(data, filter)
    {
    $.each(data,function(key,value)
    {
    $('#'+filter+' [name="'+key+'"]').val(value);
    });
    };
    然后在使用过程中发现. input ,select 都可以回填数据.就是Checkbox不回填.
    后来我跟踪了页面样式发现
    checkbox是隐的,数值已回填 ,后面有Div.通过改样式即可
    0 回复
  • interlij
    2017-9-12
    因为这样,所以.loadData 没有办法进行数据读入,经过改良.我将这个改了
    Form.prototype.loadData = function(data, filter)
    {
    $.each(data,function(key,value)
    {
    var inputType=$('#'+filter+' [name="'+key+'"]').attr('type');
    if("checkbox"==inputType)
    {
    $('#'+filter+' [name="'+key+'"]').attr("checked","true");
    }
    else
    {
    $('#'+filter+' [name="'+key+'"]').val(value);
    }
    });
    };
    0 回复
  • interlij
    2017-9-12
    但是又发现,虽然样式改了.数据也回填 了.但并没有激活Select事件.(比如你选其它)要让用户填写其它的附注.
    0 回复
  • interlij
    2017-9-12
    所以,只能动用强大的jquery功能了
    0 回复
  • interlij
    2017-9-12
    实在是没有办法........................
    0 回复
  • interlij
    2017-9-12
    上面代码错了一个地方,sorry
    Form.prototype.loadData = function(data, filter)
    {
    $.each(data,function(key,value)
    {
    var inputType=$('#'+filter+' [name="'+key+'"]').attr('type');
    if("checkbox"==inputType)
    {
    $('#'+filter+' [name="'+key+'"]').attr("checked",value);
    }
    else
    {
    $('#'+filter+' [name="'+key+'"]').val(value);
    }
    });
    };
    0 回复
  • interlij
    2017-9-12
    @xuffy 是呀,一模一样的问题.你这样改是可以的
    0 回复
  • interlij
    2017-9-12
    @xuffy 但是有问题是.因为你改了这里,所以table上如果带了checkBox 就无法判断选中记录
    0 回复
本帖已设置禁止回复
本周热议
没有相关数据
layui

微信扫码关注 layui 公众号