本文作者:DurkBlue

layui复选框checkbox全选反选和获取选中值

DurkBlue 2021-11-29 326 抢沙发
layui复选框checkbox全选反选和获取选中值摘要: Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,...

Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。

layui框架是为web开发人员打造的一个前端框架,支持你所能用到的所有浏览器,包含了大量的html、css和js组件,别看组件多,它依然属于轻量级框架,使用的难度很小,但是每一处都是经过细心处理过的,质量和速度都会有保证,非常适合快速开发界面。

layui复选框checkbox全选反选和获取选中值  第1张    <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);
            }
        })
    })


此篇文章由DurkBlue发布,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2021-11-29
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,326人围观)参与讨论

还没有评论,来说两句吧...