layui框架使用复选框checkbox遇到的坑（限制选中的个数）

最新推荐文章于 2023-08-28 16:06:43 发布

Hi，all

最新推荐文章于 2023-08-28 16:06:43 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/jinchunzhao123/article/details/93036536

jQuery 专栏收录该内容

7 篇文章

订阅专栏

博客围绕layui前端框架在公司后台管理系统的使用展开，提出如何判断复选框是否选中、获取选中值及选中个数的问题，指出常规js方法无法正确获取，给出layui复选框检测选择个数并限制个数的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui前端框架的使用场景：公司后台管理系统

问题点：如何判断是否选中复选框、获取它选中的值、并获取选中了几个复选框

常规的js方法中判断：

 $("input:checkbox[name='tagid']:checked").each(function(){
                   // arr[i] = $(this).val();
                  tagids =  $(this).val()+"," + tagids  ;
                });

无法正确获取。

解决办法：

//laui的复选框检测选择的个数，并限制其个数

 form.on('checkbox(tagid)',function(data){
            console.log(data)
            if ($("input[name='tagid']:checked").length>5){
                //将选中的全部取消
                //$("input[name='level']:checked").removeAttr("checked");
                //$(this).checked = false;
                $(this).prop("checked", false); 
                form.render('checkbox'); 
                layer.msg("最多只能选择5个标签", {
                    time : 3000,
                    icon : 10 
                });
            }
          });

tagid指的是：lay-filter="tagid"