全選反選多數適用于購物車中，下面介紹兩種實作類似購物車的checkbox全選反選的方法
第一種：通過jQuery實作全選反選
效果圖：
實作代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="All" />
</th>
<th>課程名稱</th>
<th>所屬學院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>JavaScript</td>
<td>前端與移動開發學院</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>css</td>
<td>前端與移動開發學院</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>html</td>
<td>前端與移動開發學院</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>jQuery</td>
<td>前端與移動開發學院</td>
</tr>
</tbody>
</table>
</div>
<script>
//核心代碼：
$(function() {
// 1.全選按鈕All發生變化時，子復選框(td input)與全選按鈕狀態保持一直
$('#All').change(function() {
$('td input').prop('checked', $('#j_cbAll').prop('checked'))
})
// 2.被選中的子復選框數量<總數量則取消全選
$('td input').change(function() {
if ($('td input:checked').length < $('td input').length) {
$('#All').prop('checked', false)
} else {
$('#All').prop('checked', true)
}
})
})
</script>
</body>
</html>第二種：通過vue實作全選反選
效果圖：
實作代碼：
<template>
<div>
<span>全選:</span>
<!-- 第三步：給全選框系結v-model，v-model的值取決于所有小復選框的值 -->
<input type="checkbox" v-model="all">
<!-- 第四步：點擊反選按鈕所有小復選框的狀態取反 -->
<button @click="fan">反選</button>
<ul>
<!-- 第一步：先通過v-for填充內容 -->
<!-- :key的值有id用id，沒有id用索引 -->
<li v-for="(obj,index) in arr" :key="index">
<!-- 第二步：給小復選框系結v-model值 -->
<input type="checkbox" v-model="obj.c">
<span>{{obj.name}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "豬八戒",
c: false,
},
{
name: "孫悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龍馬",
c: false,
},
],
};
},
computed:{
// 全選框v-mode的值取決于obj.c的值，所以要在computed計算屬性中宣告
all: {
set(val) {
// 當對全選框進行了修改后，將所有小復選框的狀態與全選框狀態保持一致
this.arr.forEach(obj=>obj.c=val)
},
// 遍歷小復選框的c屬性狀態，全部為真則全選選中，有一個為false則全選取消，根據分析可以使用陣列的every方法
// 陣列的every方法，會遍歷所有資料，有一個為false就直接回傳false
get() {
return this.arr.every(obj=>obj.c===true)
}
}
},
methods: {
fan() {
//點擊反選按鈕所有小復選框的狀態取反
this.arr.forEach(obj=>obj.c=!obj.c)
}
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330347.html
標籤：其他
上一篇：EventLoop
下一篇：階段五：Vue進階