layui 复选框checkbox 实现全选全选
程序员文章站
2022-12-21 09:52:03
效果图 ......
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> </head> <body> <form class="layui-form"> <div class="checkallbox"> <input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allchoose" value="checkall"/><span>全选</span></div> <div class="seach-box"> <ul> <li><input lay-skin="primary" type="checkbox" name="like1[aaa]" value="aaa"/><span>aaa</span></li> <li><input lay-skin="primary" type="checkbox" name="like1[bbb]" value="bbb"/><span>bbb</span></li> <li><input lay-skin="primary" type="checkbox" name="like1[ccc]" value="ccc"/><span>ccc</span></li> <li><input lay-skin="primary" type="checkbox" name="like1[ddd]" value="ddd"/><span>ddd</span></li> </ul> </div> </form> <script src="layui/layui.all.js"></script> <script type="text/javascript"> layui.use(['form','jquery'], function () { var form = layui.form; var $ = layui.jquery; //点击全选, 勾选 form.on('checkbox(allchoose)', function (data) { var child = $(".seach-box input[type='checkbox']"); child.each(function (index, item) { item.checked = data.elem.checked; }); form.render('checkbox'); }); }); </script> </body> </html>
效果图
推荐阅读
-
javaScript checkbox 全选/反选及批量删除_表单特效
-
yii实现CheckBox复选框在同一行显示的方法,yiicheckbox
-
ASP.NET学习笔记(五)-全球化部署,网站发布方法,AJAX使用,水晶报表使用,DropDownList,CheckBox全选
-
js实现checkbox全选和反选示例_基础知识
-
复选框全选与全不选操作实现思路_javascript技巧
-
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
-
复选框全选/全部选
-
,帮忙看看上面代码哪里异常了 JS显示Stack overflow at line:0 复选框全选和单选的时候也有点有关问题
-
axure怎么制作复选框的全选和反选?
-
大家好!,今天介绍一个简单实现全选全不选的方法,希望能对你有帮助哦!