layui复选框checkbox全选和获取值的解决方案

简介: layui复选框checkbox全选和获取值的解决方案

引入外部文件

    <script src="../js/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">


HTML代码

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">可见班级</label>
        <input type="checkbox" name="" lay-skin="primary" id="class_all" lay-filter="class_all" title="全选">
        <div class="layui-input-block" id="check">
            <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600110" value="600110">
            <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600120" value="600120">
            <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600130" value="600130">
            <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600140" value="600140">
            <input type="checkbox" name="" lay-skin="primary" class="class_one" title="600150" value="600150">
        </div>
    </div>
</form>
<button id="btn" class="layui-btn">提交</button>


javascript代码

 layui.use(['form'], function () {
        let form = layui.form;
        //全选
        form.on('checkbox(class_all)', function (data) {
            var a = data.elem.checked;
            if (a == true) {
                $(".class_one").prop("checked", true);
                form.render('checkbox');
            } else {
                $(".class_one").prop("checked", false);
                form.render('checkbox');
            }
        });
        //有一个未选中全选取消选中;
        form.on('checkbox(class_one)', function (data) {
            var item = $(".class_one");
            for (var i = 0; i < item.length; i++) {
                if (item[i].checked == false) {
                    $("#class_all").prop("checked", false);
                    form.render('checkbox');
                }
            }
        });
    });
    $(function () {
        $("#btn").click(function () {
            var checkValue = [];
            $('#check input[type=checkbox]:checked').each(function () {
                checkValue.push($(this).val());
            });
            if (checkValue == "") {
                alert("请选择选项!");
                return false;
            } else {
                console.log(checkValue);
            }
        })
    })


Done !

相关文章
|
6月前
|
JavaScript
使用layui checkbox复选框样式实现单选功能
使用layui checkbox复选框样式实现单选功能
431 0
|
6月前
|
JavaScript 前端开发
详细解读checkbox的全选与反选
详细解读checkbox的全选与反选
88 0
全选或者单选checkbox的值动态添加到div
全选或者单选checkbox的值动态添加到div
58 0
|
Python
uniapp实现checkbox全选
本文讲述uniapp的checkbox如何复选
230 0
layui的复选框怎么设置只能单选
layui的复选框怎么设置只能单选
|
JavaScript
element checkbox复选框实现全选功能
element checkbox复选框实现全选功能
|
JavaScript
关于复选框checkbox没有选中不能获取值的问题
关于复选框checkbox没有选中不能获取值的问题
183 0
关于复选框checkbox没有选中不能获取值的问题
elementui里checkbox全选操作
elementui里checkbox全选操作
263 0
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
140 0