layui框架下 checkbox全选功能
layui下的全选功能 结合网上的资料自己写了一个简单的例子,如果中间有错误请博友指正!
注意:
1.必须在form中
2.在全选checkbox中 必须加上
1 | lay-filter= "allChoose" |
1 2 3 4 5 6 7 8 9 | < form class="layui-form"> < div class="checkallbox">< input type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall" />< span >全选</ span ></ div > < div class="seach-box"> < ul > < li >< input type="checkbox" name="type" value="checktongdun" />< span >aaa</ span ></ li > < li >< input type="checkbox" name="type" value="checkbairong" />< span >bbb</ span ></ li > </ ul > </ div > </ form > |
JS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type= "text/javascript" > layui.use( 'form' , function () { var form = layui.form(); form.on( 'checkbox(allChoose)' , function (data) { var child = $( "input[name='type']" ); child.each( function (index, item) { item.checked = data.elem.checked; }); form.render( 'checkbox' ); }); </script> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步