【layui 】 checkbox实现全选、反全选效果

最新推荐文章于 2024-01-15 15:27:32 发布

celestine113

最新推荐文章于 2024-01-15 15:27:32 发布

阅读量2.2k

点赞数

分类专栏： layui js 工具使用

本文链接：https://blog.csdn.net/qq_41194534/article/details/88536063

版权

js 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

工具使用

4 篇文章 0 订阅

订阅专栏

layui

2 篇文章 0 订阅

订阅专栏

首先使用layui checkBox或任意表单需要必备的代码有

引入

 <link rel="stylesheet" href="/lib/css/layui.css">  //引入css
 <script src="/lib/layui.js"></script>       //引入js

2.html

                <div class="messageTitle">系统通知</div>
                <form class="layui-form" action="">
                    <div class="messageTool">
                        <div class="layui-input-block">
                            <input type="checkbox" name="all" title="全部"  lay-skin="primary" value="all" lay-filter="chooseAll" id="chooseAllMessage">
                        </div>
                        <button class="btn" onclick="readAll()" type="button">标为已读</button><button class="btn"
                            onclick="delMessage()" type="button">删除所选</button>
                        <div class="right">
                            未读<span id="noSeeMessage">0</span>/全部<span id="allMessage">0</span>
                        </div>
                    </div>
                    <div class="messageBody">
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                			<div class="layui-input-block">
                   				 <input type="checkbox" name="states" title=""  lay-skin="primary" value="${$value.id}" lay-filter="chooseStates">
                			</div>
                    </div>
                </form>

3.js

function setCheckBox() {
	checkedStatesList = [];
	layui.use(['form'], function () {
		var form = layui.form,    //必须调用，不然连样式都没有
		statesList = $('input[name=states]'), statesLen = statesList.length;
		form.render();
		form.on('checkbox(chooseAll)', function (data) { //监听全选 
			if (data.elem.checked) {   //全选
				checkedStatesList = [];
				statesList.each(function () {
					this.checked = true;
				})
			} else {         //全不选
				checkedStatesList = [];
				statesList.each(function () {
					this.checked = false;
				})
			}
			form.render();
		});
		form.on('checkbox(chooseStates)', function (data) {
			checkedStatesList = [];
			if (!data.elem.checked) {   //当前的checkbox 未选中，默认就是没有全选
				$('#chooseAllMessage').prop("checked", false);
				form.render('checkbox');
			} else {   //当前选中，
				statesList.each(function () {
					if (this.checked) { 
						statesLen-- ;  //记录的为未选中的个数，若为0即全选
					}
				})
				if (statesLen == 0){
					$("#chooseAllMessage").prop("checked", true);
				}	
				form.render('checkbox');
			}
		})
	})
}