<head>
<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: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 点击全选时，下面的复选框都选中
// 1.获取元素
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let ck = document.querySelectorAll('.ck')
// console.log(ck);
// 点击全选事件
checkAll.addEventListener('click', function () {
// 获取ckecked属性
let checked = checkAll.checked
// 遍历all
for (let i = 0; i < ck.length; i++) {
ck[i].checked = checked
}
// 判断当点全选时
if (ck.checked = checked) {
all.innerText = '取消'
} else {
all.innerText = '全选'
}
})
// 复选框全部选中的时候，全选也选中
for (let i = 0; i < ck.length; i++) {
ck[i].addEventListener('click', function () {
// 获取选中复选框的数量
let num = document.querySelectorAll('.ck:checked').length
// 判断选中复选框的数量等于伪数组的长度时
if (num === ck.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
}
</script>
</body>
:checked选择器，选取所有选中的复选框或单选按钮。
购物车加减操作案例
<head>
<style>
div {
width: 80px;
}
input[type='text'] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type='button'] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="2" readonly />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" />
</div>
<script>
// 点击加号可以增加数量，减号可以减少
// 获取元素
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
// 点击+号增加
add.addEventListener('click', function () {
// 获取输入框的数量
let num = total.value
// +1
num++
// 赋值给输入框
total.value = num
// num>1时启用减按钮
reduce.disabled = false
})
// 点击减少
reduce.addEventListener('click', function () {
// 获取输入框的数量
let num = total.value
// -1
num--
// 赋值给输入框
total.value = num
// console.log(num);
// 输入框的值为1的时候减号禁用
if (total.value == 1) {
reduce.disabled = true
}
})
</script>
</body>
