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>