1、在layui前端框架下 做checkbox的全選,Jq做的沒有效果。
2、前端部分(記得引入相關的js):
<input type="checkbox" name="all-id" lay-skin="primary" lay-filter="selectAll">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">
<input type="checkbox" name="id" value="{$data['id']}" lay-skin="primary" lay-filter="selectOne">
3、js部分:
layui.use(['form'], function() { form = layui.form; var form = layui.form; //全選情況下 form.on('checkbox(selectAll)', function (data) { var a = data.elem.checked; if (a == true) { $("input[name='id']").prop("checked", true); form.render('checkbox'); } else { $("input[name='id']").prop("checked", false); form.render('checkbox'); } }); //單選情況下 form.on('checkbox(selectOne)',function(data){ var f_count = 0; //單個非選擇計數 $("input[name='id']").each(function(i,el){ //如果有一個未選中 全選checkbox修改爲未選中 if( el.checked == false){ $("input[name='all-id']").prop("checked",false); form.render('checkbox'); f_count++; } }); //如果全部選中 全選checkbox修改爲選中 if (f_count == 0) { console.log(222); $("input[name='all-id']").prop("checked",true); form.render('checkbox');.0 } console.log(f_count); }); })