效果圖 ...
<!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>
效果圖
