搜索到
1
篇与
layui
的结果
-
【html】Layui 静态表格复选框全选 html<table class="layui-table" > <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th> <th>id</th> </tr> </thead> <tbody> {foreach $data_list as $key=>$vo } <tr> <td><input type="checkbox" name="id_array[]" value="{$vo.id}" lay-skin="primary" lay-filter="itemChoose" ></td> <td>{$vo.id}</td> </tr> {/foreach} </tbody> </table> js <script> layui.use(['form', 'layedit','jquery','element','table'], function() { var form = layui.form; table = layui.table; form.render(); //全选or 取消全选 form.on('checkbox(allChoose)', function(data){ //所有 var all_child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); //data.elem.checked 值为 true 或者 false all_child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); //获取已选中 var checked_child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked'); layer.msg('选中了：'+ checked_child.length + ' 个'); //获取选中的值 var arr_box = []; checked_child.each(function() { arr_box.push($(this).val()); }); console.log(arr_box.toString()); }); //全选和部分选中时候,表头全选按钮的样式变化 form.on('checkbox(itemChoose)', function (data) { var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length; var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length; if (sib == total) { $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked", true); } else { $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false); } form.render('checkbox'); //获取已选中 var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked'); layer.msg('选中了：'+ child.length + ' 个'); //获取选中的值 var arr_box = []; child.each(function() { arr_box.push($(this).val()); }); console.log(arr_box.toString()); }); }); </script>
