【JQuery 实现 layui 复选框 全选/反选/清除的功能】

关于JQuery 实现 layui 复选框 全选/反选/清除的功能

• • 思路
  • HTML的button按钮
  • js代码片段

思路

获取到渲染过的 div class=“layui-input-block” 里的 input 元素标签，改变其 checked属性

HTML的button按钮

初始的html片段是这样的

<form class="layui-form edit-form">
	<div class="layui-row">
		<div class="layui-col-sm12">
			<div class="layui-form-item">
			    <label class="layui-form-label">喜欢的水果:</label>
			    <div class="layui-btn-group">
			        <button type="button" class="layui-btn layui-btn-xs" id="checkAll">全选</button>
			        <button type="button" class="layui-btn layui-btn-xs" id="checkOpposite">反选</button>
			        <button type="button" class="layui-btn layui-btn-xs" id="checkClear"><i class="layui-icon layui-icon-delete"></i>清除</button>
				</div>
				<div class="layui-input-block">
					<input type="checkbox" name="fruits" title="苹果" lay-skin="primary">
					<input type="checkbox" name="fruits" title="菠萝" lay-skin="primary">
					<input type="checkbox" name="fruits" title="香蕉" lay-skin="primary">
				</div>
			</div>
		</div>
	</div>
</form>

页面上会渲染成

<form class="layui-form edit-form">
	<div class="layui-row">
		<div class="layui-col-sm12">
			<div class="layui-form-item">
			    <label class="layui-form-label">喜欢的水果:</label>
			    <div class="layui-btn-group">
			        <button type="button" class="layui-btn layui-btn-xs" id="checkAll">全选</button>
			        <button type="button" class="layui-btn layui-btn-xs" id="checkOpposite">反选</button>
			        <button type="button" class="layui-btn layui-btn-xs" id="checkClear"><i class="layui-icon layui-icon-delete"></i>清除</button>
				</div>
				<div class="layui-input-block">
					<input type="checkbox" name="fruits" title="苹果" lay-skin="primary">
				    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
					    <span>苹果</span>
					    <i class="layui-icon layui-icon-ok">
				    </i>
				    </div>
				    <input type="checkbox" name="fruits"  title="菠萝" lay-skin="primary">
				    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
					    <span>菠萝</span>
					    <i class="layui-icon layui-icon-ok"></i>
				    </div>
				    <input type="checkbox" name="fruits"  title="香蕉" lay-skin="primary">
				    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
					    <span>香蕉</span>
					    <i class="layui-icon layui-icon-ok"></i>
				    </div>
				</div>
			</div>
		</div>
	</div>
</form>

js代码片段

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<script>
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        // 全选
        $('#checkAll').on('click', function () {
            //寻找到所有的input，给cheched复制true
            $(this).parent().siblings("div").children('input').prop("checked", true);
            //form重新渲染checkbox元素
            form.render('checkbox');
        });
        // 反选
        $('#checkOpposite').on('click', function () {
            //寻找到所有input的父级div
            var checkboxs = $(this).parent().siblings("div").children('div');
            //遍历父级div的
            checkboxs.each((index, item) => {
                //获取父级div的class
                var className = checkboxs.eq(index).attr('class');
                //包含layui-form-checked 的是已经被选中的，不包含的是没有被选中的
                //注意： 这里的includes()是ES6的写法，不支持的话可以换成.indexOf() !== -1
                if (className.includes("layui-form-checked")) {
                    //取消选中
                    $(this).parent().siblings("div").children('input').eq(index).prop("checked", false);
                } else {
                    //选中
                    $(this).parent().siblings("div").children('input').eq(index).prop("checked", true);
                }
            })
            //form重新渲染checkbox元素
            form.render('checkbox');
        });
        // 清除
        $('#checkClear').on('click', function () {
            //寻找到所有的input，给cheched复制false
            $(this).parent().siblings("div").children('input').prop("checked", false);
            //form重新渲染checkbox元素
            form.render('checkbox');
        });
    })
</script>