layui 复选框checkbox 实现全选全选
程序员文章站
2022-05-18 20:50:04
效果图 ......
<!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>
效果图
上一篇: 博客园美化首页随笔展示美化
下一篇: 如何使用伪类选择器