小白练习写的,欢迎dalao指点
需求描述:
全选和全不选按钮共用一个 checkbox 实现,当所有 checkbox 被选中后,全选按钮文字变为全不选,只要有一个 checkbox 未被选中,全不选按钮文字就变为全不选
反选按钮用 button 实现,实现 checkbox 反选,且能实现与全选按钮的联动
效果示例:
关键点:
1、checkbox 的 checked 属性可以获取选中状态:选中:true;未选中:false
2、每一个 checkbox 的 checked 属性发生改变时,都要检查一遍全部 checkbox 的 checked,只要有一个 checkbox 未被选中,就要让全选按钮改为未选中 => 封装 checkStatus 函数
3、checkbox 的 checked 属性改变有3种方式:用户点击、反选按钮触发、全选 / 全不选按钮触发(由于使用全选 / 全不选按钮触发时,所有 checkbox 要么全选中,要么全不选,就不用检查所所有checkbox 的选中状态了)
代码实现:
html结构:
<div id="cbs">
<input type="checkbox">抽烟<br><br>
<input type="checkbox">喝酒<br><br>
<input type="checkbox">烫头<br><br>
<input type="checkbox">打游戏<br><br>
</div>
<input type="checkbox" id="all">
<span>全选</span><br><br>
<button id="reverse">反选</button>
JS代码:
// 获取元素
const cbs = document.querySelectorAll('#cbs input')
const all = document.querySelector('#all')
const reverse = document.querySelector('#reverse')
封装 checkStatus 函数:
function checkStatus() {
// 遍历所有的checkbox状态
for (let j = 0; j < cbs.length; j++) {
// 只要有一个未选中,就复活全选按钮,并且直接return退出函数
if (cbs[j].checked === false) {
// 获取全选按钮的下一个兄弟节点,即放"全选"文字的span
all.nextElementSibling.innerHTML = '全选'
all.checked = false
return
}
}
// 若中途没有return出函数,说明全部checkbox都是选中状态,复活全不选按钮
all.nextElementSibling.innerHTML = '全不选'
all.checked = true
}
全选功能:
让所有 checkbox 的 checked 值 与全选 / 全不选按钮一致,就可以轻松实现全选 / 全不选功能
all.addEventListener('click', function () {
for (let i = 0; i < cbs.length; i++) {
// 实现全选、全不选按钮功能
cbs[i].checked = this.checked
if (this.checked === true) {
// 修改按钮功能文字
this.nextElementSibling.innerHTML = '全不选'
} else {
this.nextElementSibling.innerHTML = '全选'
}
}
})
反选功能:
reverse.addEventListener('click', function () {
for (let i = 0; i < cbs.length; i++) {
// 所有checkbox选中状态取反
cbs[i].checked = !cbs[i].checked
}
// 反选后检查所有checkbox状态
checkStatus()
})
别忘了给每个 checkbox 绑定点击事件:
// 用循环为每一个checkbox添加点击事件
for (let i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('click', function () {
// 检查所有checkbox状态
checkStatus()
})
}
结束;