Implémentation du bouton JS Sélectionner tout

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

1. Cliquez sur le bouton Sélectionner tout
2. Déterminer l'état sélectionné du bouton Sélectionner tout actuel
3. 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é

1. Cliquez sur l'un des boutons dans les options 1 à 4
2. Déterminez si les 1 à 4 états sélectionnés actuellement sélectionnés sont tous sélectionnés
3. 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>