jquer 编辑数组全选反选

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../Student/Layui/css/modules/laydate/default/laydate.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script src="./js_.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style type="text/css">

.show{
border: 1px solid red;
margin: 0.5%;
width: 99%;
height: 100px;
display: flex ;
}
.show img{
width: 100px;
height: 100px;
}
.text p{
font-size: 10px;
color: red;
}
.text{
margin-left: 20px;
}
.showss{
background-color: red;
}
</style>
<div id="shows">
<div id="show" class="show">
<input type="checkbox" name="" id="" value="" class="layui-form-checked" />
<img src="./img/O1CN0105yTDp1jmj068ZE1Z_!!2201471164591.jpg" >
<div class="text">
<p>小王（布偶猫）英短蓝白幼猫折耳蓝猫银渐层短腿小猫咪活物布偶加菲猫幼崽宠物猫 </p>
<span >售价：￥1.2W</span>
</div>
</div>
</div>

<input type="checkbox" onclick="erevy()"/>全选
<input type="checkbox" onclick="anti()" />反选
<div id="showss">

</div>
</body>
<script type="text/javascript">
var list=[
{
id:1,
img:"img/1%20(3).jpg",
name:"小王（布偶猫）",
money:"￥1.2W",

},
{
id:2,
img:"img/1%20(1).gif",
name:"小黑（加菲猫）",
money:"￥0.2W",

},
{
id:3,
img:"img/1%20(2).jpg",
name:"小宋（橘猫）",
money:"￥0.8W",

},
{
id:4,
img:"./img/O1CN0105yTDp1jmj068ZE1Z_!!2201471164591.jpg",
name:"小李（金渐层）",
money:"￥0.6W",

},
{
id:5,
img:"img/1%20(3).jpg",
name:"小蓝（蓝猫）",
money:"￥3.2W",

},
]

var Text='';
for(let i = 0; i<list.length;i++){
Text=Text+'<div id="show" class="show"><input type="checkbox" name="" id="" value="'+list[i].id+'" class="layui-form-checked" onclick="one()"/><img src="'+list[i].img+'" ><div class="text"><p>'+list[i].name+'</p><span >售价：'+list[i].money+'</span></div></div>'
}
$("#shows").html(Text)

var count=0;//次数用来记录0-1
function erevy(){
var input=$("#shows input");
var texts=''
if(count==0){
for(let i =0;i<input.length;i++){
input[i].checked=true;
for(let s=0;s<list.length;s++){
if(input[i].value == list[s].id){
texts=texts+'<div id="show" class="show"><img src="'+list[i].img+'" ><div class="text"><p>'+list[i].name+'</p><span >售价：'+list[i].money+'</span></div></div>'
}
}
$("#showss").html(texts);
}
count=1
}else{
for(let i =0;i<input.length;i++){
input[i].checked=false;
}
$("#showss").html('');
count=0
}
}
// 反选
function anti(){
// 获取到页面上面的已经显示数据的input标签
var input=$("#shows input");
var texts=''
// 循环页面上的input标签
for(let i=0;i<input.length;i++){
// 此时判断点击反转的时候给选中的设置为取消
if(input[i].checked == true){
// 赋值
input[i].checked=false;
for(let s=0;s<list.length;s++){
// 让反转后选中的input的数组一一展示出来
if(input[i].value == list[s].id){
texts=texts+'<div id="show" class="show"><img src="'+list[i].img+'" ><div class="text"><p>'+list[i].name+'</p><span >售价：'+list[i].money+'</span></div></div>'
}
}

}else{
// 给他的没有选中的反转为选中赋值
input[i].checked = true
// 因为最外面是一个一个input循环的所以我们在这里循环整个数组
for(let s=0;s<list.length;s++){
// 让反转后选中的input的数组一一展示出来
if(input[i].value == list[s].id){
texts=texts+'<div id="show" class="show"><img src="'+list[i].img+'" ><div class="text"><p>'+list[i].name+'</p><span >售价：'+list[i].money+'</span></div></div>'
}
}

}
}
$("#showss").html(texts);
}
// 该方法绑定在页面已经出现了的数据的单选框
function one(){
//获取到页面上的input标签上面已经循环出来的
var input=$("#shows input");
// 设置一个空数组方便下面写
var texts=''
// 循环页面上已经存在数据的input标签要循环选中的状态
for(let i=0;i<input.length;i++){
// 去进行判断如果看看页面上哪一个或者那几个的单选框是选中的状态如果为选中状态的属性为true进入判断
if(input[i].checked == true){
// 循环数组的数据根据
for(let s=0;s<list.length;s++){
// 因为我在输出的时候为每一个input标签写上了value值等于信息的id 所以我们获取到去和数据的id进行比较
// 如果id等于我们查询到数据到的数据找到准确的数据的时候追加上去
if(input[i].value == list[s].id){
texts=texts+'<div id="show" class="show"><img src="'+list[i].img+'" ><div class="text"><p>'+list[i].name+'</p><span >售价：'+list[i].money+'</span></div></div>'
}
}
}
}
// 注意这里写入的时候要写在for循坏外面
$("#showss").html(texts);

}

</script>
</html>