Des fonctions simples à implémenter
fonction 1 Lorsque vous cliquez sur le bouton Sélectionner tout, laissez les boutons 1 à 4 être sélectionnés
- Cliquez sur le bouton Sélectionner tout
- Déterminer l'état sélectionné du bouton Sélectionner tout actuel
- En fonction de l'état sélectionné du bouton Sélectionner tout, décidez si vous souhaitez laisser les boutons 1 à 4 être sélectionnés
fonction 2 Lorsque les options 1 à 4 sont toutes sélectionnées, laissez le bouton Sélectionner tout être sélectionné
- Cliquez sur l'un des boutons dans les options 1 à 4
- Déterminez si les 1 à 4 états sélectionnés actuellement sélectionnés sont tous sélectionnés
- Si tous sont sélectionnés, sélectionnez tout le bouton
1. Le code de la partie 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. Le code de la partie JavaScript
fonction un
version de base
<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>
Version optimisée
<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>
version finale
<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>
Fonction deux
<script>
items.forEach(function (item) {
item.onclick = function () {
// 点击其中一个按钮的时候, 判断其他几个 的选中状态是否为 true; 如果都是true 那么选中全选; 否则不选中全选
allBtn.checked = items.every(function (item) {
return item.checked
})
}
})
</script>