<!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>
效果图
如果您觉得本文的内容对您的学习有所帮助：
关键字：
layui 复选框checkbox