关于表单checkbox全选问题

提问 已结 7 127
HillelDu
HillelDu 2019-8-19
悬赏:20飞吻
版本:layui 浏览器:
一个全选复选框,下面有若干个复选框

点击全选,全选复选框选中,下面的复选框全部选中

再次点击全选复选框,全选复选框不选中,下面的复选框也全部不选中

单个选中下面的复选框,至全部选中时,全选复选框自动选中,下面的有一个取消选中是,全选复选框自动取消选中

问题来了,利用layui自带的复选框进行操作,第一步,全选复选框选中,然后取消,再次选中,然后点击下面的随便一个复选框,神奇的事情发生了,点击以后复选框还是选中状态,但是全选复选框已经自动取消选中了,在比点击那个复选框,变成了未选中状态了,然后在点击选中,神奇的事情又发生了,全选复选框从此之后再无任何反应了。

问:如何解决这种有时候需要点击两次才可以取消选中!还有全选复选框从此以后不会再自动选中和取消,除非刷新页面!
回帖
  • 莫莫996
    2019-8-19
    重新试了一下,并没有复现你说的这个问题呀
    0 回复
  • IDyun
    2019-8-19
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <blockquote class="layui-elem-quote layui-text">
    鉴于小伙伴的普遍反馈,先温馨提醒两个常见“问题”:1. <a href="/doc/base/faq.html#form" target="_blank">为什么select/checkbox/radio没显示?</a> 2. <a href="/doc/modules/form.html#render" target="_blank">动态添加的表单元素如何更新?</a>
    </blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表单集合演示</legend>
    </fieldset>

    <form class="layui-form" action="">
    <div class="layui-form-item">
    <input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layAllChoose" title="全选">
    </div>
    <div class="layui-form-item">
    <input type="checkbox" name="layTableCheckbox" lay-filter='layChoose' lay-skin="primary">
    <input type="checkbox" name="layTableCheckbox" lay-filter='layChoose' lay-skin="primary">
    </div>
    </form>

    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,layedit = layui.layedit
    ,laydate = layui.laydate;
    var $ = layui.$
    //全选
    form.on('checkbox(layAllChoose)', function(data){
    $(':checkbox[lay-filter="layChoose"]').prop('checked',data.elem.checked);
    form.render('checkbox');
    });

    //单选
    form.on('checkbox(layChoose)', function(data){
    var isAll = !Boolean($(':checkbox[lay-filter="layChoose"]').not(':checked').length)
    $(':checkbox[lay-filter="layAllChoose"]').prop('checked',isAll);
    form.render('checkbox');
    });


    });
    </script>

    </body>
    </html>
    1 回复
  • 很简单的功能,实现起来也比较简单,愣是被你说的那么复杂,而且这跟layui也没有关系,就是用原生的checkbox实现也是一样的,你代码写的有问题就把你代码贴出来让大家帮你找问题,别动不动就是layui的问题
    0 回复
  • HillelDu
    2019-8-19
    我去,我是不是采纳错了,IDyun我是要采纳你的来着,我试了你贴出来的代码,确实没毛病!我不是经常逛这东西,采纳完,我发现貌似点错了!sorry
    0 回复
  • HillelDu
    2019-8-19
    再补充一点吧,我测试了一下给checkbox用atrr赋值属性,就会出现我说的问题!所以看到本问题的还是乖乖的用prop吧!
    0 回复
  • IDyun
    2019-8-19
    @HillelDu 没事,主要赚飞吻的,不过社区也没什么地方消耗飞吻的。
    [失望] 过个周末,签到又回到解放前了,什么时候改成累计签到天数啊
    0 回复
  • HillelDu
    2019-8-19
    @IDyun 第一次问问题,对着个发帖什么的玩的不熟悉,见谅!
    0 回复