需要实现的简单功能
功能1 点击全选按钮的时候, 让选项1~4这几个按钮选中
- 点击全选按钮
- 判断当前全选按钮的选中状态
- 根据全选按钮的选中状态, 决定是否让 1~4这几个按钮被选中
功能2 选项1~4全被选中的时候, 让全选按钮被选中
- 点击选项1~4其中一个按钮
- 判断当前选中1~4的选中状态是否都为选中
- 如果都是选中的, 将全选按钮选中
1.html部分的代码
<input type="checkbox" class="allBtn"> 全选
<hr>
<input type="checkbox" class="item"> 选项1 <br>
<input type="checkbox" class="item"> 选项2 <br>
<input type="checkbox" class="item"> 选项3 <br>
<input type="checkbox" class="item"> 选项4 <br>
2.JavaScript部分的代码
功能一
基础版
<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素
var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组
allBtn.onclick = function(){
if(allBtn.checked === true){
//选中1~4选项
items.forEach(function(item){
item.checked === true
})
} else{
//取消选中1~4选项
item.forEach(function(item){
item.checked === flase
})
}
</script>
优化版
<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素
var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组
allBtn.onclick = function(){
if(allBtn.checked === true){
//选中1~4选项
items.forEach(function(item){
item.checked === allBtn.checked
})
} else{
//取消选中1~4选项
item.forEach(function(item){
item.checked === allBtn.checked
})
}
</script>
最终版
<script>
//第一步:获取元素:
var allBtn = document.querySelector('.allBtn')
// 获取class为allBtn的元素
var items = [...document.querySelectorAll('.item')]
//获取所有class为item的元素,并且输出为真数组
allBtn.onclick = function () {
items.forEach(function (item) {
item.checked = allBtn.checked
})
</script>
功能二
<script>
items.forEach(function (item) {
item.onclick = function () {
// 点击其中一个按钮的时候, 判断其他几个 的选中状态是否为 true; 如果都是true 那么选中全选; 否则不选中全选
allBtn.checked = items.every(function (item) {
return item.checked
})
}
})
</script>