<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<style>
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd {
/* 默认有边距，都要清除 */
margin: 0;
padding: 0;
/*字体设置*/
font-size: 14px;
font-family: "Microsoft Yahei", sans-serif;
/* 去掉列表的原点 */
list-style: none;
/* 默认鼠标 */
cursor: default;
}
.popupView{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.popup{
min-width: 350px;
position: relative;
max-width: 500px;
min-height: 200px;
border: 2px solid #f3f3f3;
box-sizing: border-box;
padding: 15px 0 0 0;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
}
.p-title{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.red{
color: red;
}
.p-title .txt{
white-space: nowrap;
}
.p-title .close{
position: absolute;
right: 15px;
color: #666;
font-size: 15px;
}
.p-content{
padding: 20px 15px 0 15px;
display: flex;
max-height: 300px;
overflow-y: scroll;
}
.arrlist{
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 50px;
}
.arrlist li{
display: flex;
align-items: center;
margin-right: 20px;
margin-bottom: 10px;
}
.arrlist li input{
margin-right: 3px;
}
.popfot{
height: 50px;
display: flex;
align-items: center;
align-items: center;
border-top: 2px solid #f3f3f3;
justify-content: flex-end;
position: absolute;
bottom: 0;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
background: #fff;
}
.popfot .flex{
display: flex;
align-items: center;
margin-left: 18px;
}
#reverse{
margin-left: 18px;
}
.popfot .btn{
margin-left: 18px;
width: 100px;
height: 28px;
text-align: center;
line-height: 28px;
border-radius: 6px;
border: 1px solid #dcdfe6;
}
.popfot .flex input{
margin-right: 3px;
}
.popfot .blue{
background: #409eff;
color: #fff;
}
.p-title{
padding-bottom: 10px;
}
.none{
display: none !important;
}
</style>
<body>
<div class="popupView">
<div class="popup">
<div class="p-title">
<div class="txt">复选框</div>
<span class="close">X</span>
</div>
<div class="p-content">
<ul class="arrlist">
<li><input type="checkbox" value="嗯呢">嗯呢</li>
</ul>
</div>
<div class="popfot">
<div class="flex"><input type="checkbox" id="checkall">全选</div>
<div id="reverse">反选</div>
<div class="btn blue" id="confirm">打印选中项</div>
</div>
</div>
</div>
</body>
<script>
$(function() {
var checkedList = []
var arr = ['苹果','雪梨' ,'橙汁' ,'香蕉','草莓','荔枝' ,'龙眼' ,'芒果','青瓜','茄子' ,'榴莲' ,'李子','葡萄','西瓜' ,'哈密瓜' ,'桃子','橘子','橄榄' ,'坚果']
let str = ''
for (let i = 0; i <arr.length; i++) {
str += `<li><input type="checkbox" class="item" value="${arr[i]}">${arr[i]}</li>`
}
document.getElementsByClassName('arrlist')[0].innerHTML = str
var $item = $(".arrlist input")
$("#checkall").change(function() {
if ($("#checkall").prop("checked")) {
$item.each(function(){
$(this).prop("checked", true)
})
} else {
$item.each(function(){
$(this).prop("checked", false)
})
}
})
$(".item").change(function() {
if ($item.length === $(".item:checked").length) {
$("#checkall").prop("checked", true)
} else {
$("#checkall").prop("checked", false)
}
})
$("#reverse").click(function(){
$item.each(function(){
$(this).prop("checked",!$(this).prop("checked"))
})
})
$("#confirm").click(function(){
checkedList = []
for (var k in $item) {
if ($item[k].checked) {
checkedList.push($item[k].value)
}
}
console.log('选中项',checkedList)
})
$(".close").click(function(){
$(".popup").addClass('none')
})
})
</script>
</html>
