「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。
主要看注释， 里面用到 :checked 选择器，可以匹配选中的状态
利用比较选中状态下的个数是否等于选框的个数
<script>
// 获取全选框
let checkAll = document.querySelector('#checkAll')
// 获取复选框
let chks = document.querySelectorAll('.ck')
// 获取span 全选内容
let all = document.querySelector('.all')
// console.log(checkAll, chks);
// 给全选框绑定点击事件
checkAll.addEventListener('click', function () {
// 获取checked 的状态，true / false
let state = checkAll.checked
// console.log(state);
// forEach(function(v,i){}) 遍历
chks.forEach(function (element, index) {
// 把全选矿的状态给复选框
element.checked = state
});
// 全选框状态为选中时提示 取消，没选中时提示全选
all.innerText = state ? '取消' : '全选'
})
// 遍历复选框
for (let i = 0; i < chks.length; i++) {
// 给每一个复选框绑定点击事件
chks[i].addEventListener('click', function () {
// 点击的时候就获取被选中的复选框
let ched = document.querySelectorAll('.ck:checked')
// console.log(ched);
// 判断获取到 被选中的伪数组的长度，如果等于复选框的长度就给全选框的checked 赋给true ,否者给false
if (ched.length == chks.length) {
checkAll.checked = true
// 全选状态内容显示提示 取消
all.innerText = "取消"
} else {
checkAll.checked = false
// 没有全选状态内容显示提示 全选
all.innerText = "全选"
}
})
}
这里用到了点击事件click
常见事件类型：鼠标事件：鼠标触发：click，鼠标点击；mouseenter 鼠标经过；mouseleave 鼠标离开；
焦点事件：表单获得光标：focus 获得焦点 ；blur s失去焦点；
键盘事件：键盘触发：Keydown 键盘按下；Keyup 键盘抬起
文本事件：表单输入触发 ： input 用户输入事件
购物车数量加减怎么写
<body>
<div>
<input type="text" id="total" value="1" readonly />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" />
</div>
<script>
// 1.获取元素
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
let total = document.querySelector('#total')
// 2.先做+
add.addEventListener('click', function () {
// 2.1 获取输入框的数量
let count = total.value
// 2.2 数量+1
count++
// 2.3 重新赋值给输入框
total.value = count
// 加一定会导致数量>1
reduce.disabled = false
})
reduce.addEventListener('click', function () {
// 2.1 获取输入框的数量
let count = total.value
// 2.4 判断数量是否是1，如果是1则禁用按钮
if (count == 1) {
reduce.disabled = true
}
// 2.2 数量-1
count--
// 2.3 重新赋值给输入框
total.value = count
})
</script>
</body>
总结一些注意点 ：用的是ID ，获取的时候要用'#' ，如果购物数量为0 时禁用减功能，disabled 为true时禁用，为false时 开启
