目录
html代码
css代码
js代码
完整代码
html代码
先把整体结构样式写出来
<table>
<thead>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody class="goods"></tbody>
<!-- <tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>华为手机</td>
<td>华为</td>
<td>￥5999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥2999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>三星电视</td>
<td>三星</td>
<td>￥4999</td>
</tr> -->
</table>css代码
对表格添加样式，使其呈现在页面美观
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: rgb(255, 0, 0);
font: bold 16px '微软雅黑';
color: #fff;
height: 35px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>js代码
首先要先渲染页面，把整体样式通过js呈现在页面上
根据需求写js代码
点击全选按钮 ，其他按钮都被选中
绑定事件，让所有商品状态与全选按钮状态同步
单击每个商品 设置全选按钮状态
单击某个商品 所有商品都选中，全选按钮选中，只要有一个未选中全选按钮取消
要注意：cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用
<script>
// 定义商品数据
const goods = [
{
id: +new Date(),
name: '华为手机',
brand: '华为',
price: 5999,
good_status: false,
},
{
id: +new Date(),
name: '小米净水器',
brand: '小米',
price: 2999,
good_status: true,
},
{
id: +new Date(),
name: '三星电视',
brand: '三星',
price: 4999,
good_status: false,
},
]
//1.渲染页面
function render() {
let str = ''
goods.forEach(function (item) {
str += `
<tr>
<td>
<input type="checkbox" name="check" class="ck"${item.checked ? 'checked' : ''
} />
</td>
<td>${item.name}</td>
<td>${item.brand}</td>
<td>${item.price}</td>
</tr>
`
})
document.querySelector('tbody').innerHTML = str
}
render()
//2.点击全选按钮 其他按钮都被选中
//绑定事件，让所有商品状态与全选按钮状态同步
const checkAll = document.querySelector('#checkAll')
const cks = document.querySelectorAll('.ck')//伪数组
//change 状态发生改变时触发
checkAll.addEventListener('change', function () {
const that = this
cks.forEach(function (item) {
item.checked = that.checked
})
})
//单击每个商品 ，设置全选按钮状态
cks.forEach(function (item) {
item.addEventListener('change', function () {
// cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用
checkAll.checked = Array.from(cks).every(function (item) {
return item.checked
})
})
})
</script>完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #f40;
font: bold 16px '微软雅黑';
color: #fff;
height: 35px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody class="goods"></tbody>
<!-- <tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>华为手机</td>
<td>华为</td>
<td>￥5999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥2999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>三星电视</td>
<td>三星</td>
<td>￥4999</td>
</tr> -->
</table>
<script>
// 定义商品数据
const goods = [
{
id: +new Date(),
name: '华为手机',
brand: '华为',
price: 5999,
good_status: false,
},
{
id: +new Date(),
name: '小米净水器',
brand: '小米',
price: 2999,
good_status: true,
},
{
id: +new Date(),
name: '三星电视',
brand: '三星',
price: 4999,
good_status: false,
},
]
// 1 基本渲染
function render() {
let str = ''
goods.forEach(function (item) {
str += `
<tr>
<td>
<input type="checkbox" name="check" class="ck" ${
item.good_status ? 'checked' : ''
}/>
</td>
<td>${item.name}</td>
<td>${item.brand}</td>
<td>￥${item.price}</td>
</tr>
`
})
document.querySelector('.goods').innerHTML = str
}
render()
// 2 点击全选 让所有商品 跟着变化
// 思路：绑定事件 让所有商品状态与全选按钮状态同步
const checkAll = document.querySelector('#checkAll')
const cks = document.querySelectorAll('.ck') // 伪数组
console.log(Array.isArray(cks)) // false
console.log(cks.forEach) // 本身提供forEach方法用于遍历
// change状态改变时候触发
checkAll.addEventListener('change', function () {
// console.log(this.checked) 全选按钮的状态
const _this = this
cks.forEach(function (item) {
// console.log(this) //window
// console.log(that)
item.checked = _this.checked
})
})
//3 单击每个商品 设置全选按钮状态
// 思路: 单击某个商品 所有商品都选中全选按钮选中，只要有一个未选中全选按钮取消
// cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用
console.log(Array.isArray(Array.from(cks)))
cks.forEach(function (item) {
item.addEventListener('change', function () {
checkAll.checked = Array.from(cks).every(function (item) {
return item.checked
})
})
})
</script>
</body>
</html>
