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

作者：System 时间：2024年08月23日分类：所有,jquery 字数：1226

这篇文章距离上次修改已过438天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui复选框操作示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 
<div>
    <button id="selectAll">全选</button>
    <button id="invertSelect">反选</button>
    <button id="clearAll">清空</button>
</div>
 
<div>
    <input type="checkbox" class="layui-checkbox" value="1">选项1
    <input type="checkbox" class="layui-checkbox" value="2">选项2
    <input type="checkbox" class="layui-checkbox" value="3">选项3
    <input type="checkbox" class="layui-checkbox" value="4">选项4
</div>
 
<script>
    $(document).ready(function(){
        // 全选
        $('#selectAll').click(function(){
            $('.layui-checkbox').prop('checked', true);
        });
 
        // 反选
        $('#invertSelect').click(function(){
            $('.layui-checkbox').each(function(){
                $(this).prop('checked', !$(this).prop('checked'));
            });
        });
 
        // 清空
        $('#clearAll').click(function(){
            $('.layui-checkbox').prop('checked', false);
        });
    });
</script>
 
</body>
</html>

这段代码使用jQuery实现了layui风格复选框的全选、反选和清空功能。点击相应的按钮会对页面上所有的layui复选框进行相应的操作。

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

评论已关闭

推荐阅读