layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选
2021/4/15 10:27:59
本文主要是介绍layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选
<div class="layui-form-item"> <label class="layui-form-label">站点</label> <div class="layui-input-block"> <input type="checkbox" lay-skin="primary" id="c_all" lay-filter="c_all" title="全部"> <input type="checkbox" lay-skin="primary" id="f_all" lay-filter="f_all" title="反选"> <br/><br/> <input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="北京" value="10001"> <input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="测试" value="10002"> <input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="西安" value="10003"> <input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="常州" value="10004"> <input type="checkbox" name="cityId" lay-skin="primary" lay-filter="c_one" class="cityId" title="肇庆" value="10005"> </div> </div>
layui.use('form', function () { var form = layui.form; //全选 form.on('checkbox(c_all)', function (data) { var a = data.elem.checked; if (a == true) { $(".cityId").prop("checked", true); form.render('checkbox'); } else { $(".cityId").prop("checked", false); form.render('checkbox'); } }); //反选 form.on('checkbox(f_all)', function (data) { var item = $(".cityId"); item.each(function () { if ($(this).prop("checked")) { $(this).prop("checked", false); } else { $(this).prop("checked", true); } }) form.render('checkbox'); }); //有一个未选中全选取消选中 form.on('checkbox(c_one)', function (data) { var item = $(".cityId"); for (var i = 0; i < item.length; i++) { if (item[i].checked == false) { $("#c_all").prop("checked", false); form.render('checkbox'); break; } } //如果都勾选了 勾上全选 var all=item.length; for (var i = 0; i < item.length; i++) { if (item[i].checked == true) { all--; } } if(all==0){ $("#c_all").prop("checked", true); form.render('checkbox');} }); });
这篇关于layui checkbox 反选/全选/取消单个取消全选/全部选中勾上全选的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-29易优CMS安装常见问题汇总-icode9专业技术文章分享
- 2024-06-28易优新手必读安装教程-icode9专业技术文章分享
- 2024-06-28忘记eyoucms后台密码怎么办?-icode9专业技术文章分享
- 2024-06-26终极指南:Scrum中如何设置需求优先级
- 2024-06-26AI大模型企业应用实战(25)-为Langchain Agent添加记忆功能
- 2024-06-26小白家庭 nas 搭建方案-icode9专业技术文章分享
- 2024-06-23AI大模型企业应用实战(14)-langchain的Embedding
- 2024-06-23AI大模型企业应用实战(15)-langchain核心组件
- 2024-06-23AI大模型企业应用实战(16)-langchain核心组件
- 2024-06-23AI 大模型企业应用实战(06)-初识LangChain