【JQuery 实现 layui 复选框 全选/反选/清除的功能】
<!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复选框进行相应的操作。
评论已关闭