Compter le nombre de CHECKBOX cochées

Version imprimable

Bonjour,

je sais que ce genre de question a déjà été posé, mais je n'arrive vraiment pas à appliquer ce que j'ai trouvé sur le net.
Actuellement j'ai des checkbox (5), qui sont créés à partir d'un mock (oui, le but c'est de comprendre et manipuler).

Mon code donne ça actuellement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div
            v-for="item in getItems()"
            :key="item"
          >
<input
                :id="item.id"
                slot="input"
                type="checkbox"
                :name="item.code"
                :value="item.libelle"
                :checked="checked"
              >
              <label
                slot="label"
                :for="item.id"
              > {{ item.libelle }} </label>
</div>
            ... 
 
            <div v-show="messageMini">{{ $t('LIMITE_MINI') }}</div >
            <div v-show="messageMax">{{ $t('LIMITE_MAX') }}</div >

import du mock et du model pour remplir les attributs des checkbox

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
export default class ModalFiltre extends Vue {
  @Prop()
  private checked!: boolean;
 
  private messageMini = false;
  private messageMax = false;
 
 
//ici c'est le mock
getItems(): FiltreData[]{
    return [truc1,
    truc2,
    truc3,
    truc4,
    truc5];
  }
 
 
//ici la fonction qui doit compter les checkbox
  private checkItem() {
    let countItem = 0;
 
    for(let item in this.getItems){
      if(this.checked){
        countItem++;
      }
    }
    console.log('countItems = ' + countItem); 
 
    //si case cochée < 1 => messageMini
 
    //si case cochée > 4 => messageMax
 
  }

J'arrive donc pas à trouver un moyen pour que la fonction compte le nombre de checkbox cochée.
Le but étant que s'il n'y en a pas => j'affiche le message : nombre insuffisant
s'il y en a trop j'affiche un message nombre max dépassé.

Si je pouvais avoir juste un coup de main, c'est tout en Typescript.

Merci d'avance

petite avancée ... mais j'ai des message dans la console ?

J'ai un peu avancé sur le check des checkbox, mais j'ai pein de message dans ma console et je ne comprends pas trop pourquoi ...

Le code pour check-in
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 private checkItems(){ let constantes = document.getElementsByTagName('ici il y a le nom du Design System qui est schématisée par la balise div'); let countItem = 0; for(let i = 0; i < constantes.length; i++){ if(this.checked){ countItem++; } else { countItem--; } } console.log('countItems = ' + countItem); }
Mais je ne peux pas tester à cause de message dans ma console :

un premier :

Citation:

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

un deuxième :

Citation:

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

???
Je pense que les messages m'empêchent de tester.

Autre problème, il faut que le compte soit synchronisé, puisque si j'ai trop de case cochées, il faut que le bouton de sauvegarde soit disabled.

=============================================
Alors rectification, je peux tester, mais en fait, il ne rentre jamais dans la boucle if(this.checked).

Un idée sur le comment le faire entrer dedans ?

01/03/2021, 11h31
NoSmoking

Bonjour,

pose toi la question : « mais que vaut this dans ma boucle ? ».

tu peux également essayer quelque chose de plus direct avec document.querySelectorAll(":checked") qui te retournera une NodeList des élément cochés.

A toi d'affiner la sélection.

Bonjour, bonjour,

j'ai pas eut le temps de mettre à jour mais j'ai finis par me trouver une solution :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
private checkItems(){
    const elements = document.getElementsByTagName('input');
    let countItem = 0;
 
    for(let i = 0; i < elements.length; i+=1){ 
      if(elements[i].checked){
        countItem += 1;
      } 
    }
 
    if(countItem > 4){
      this.messageMax = true;
    } else if (countItem < 1) {
      this.messageMini = true;
    } else {
      this.messageMax = false;
      this.messageMini = false;
    }
  }

J'ai également modifié légèrement le template

Code:

1
2
3
4
5
6
7
8
9
10
 
<input
                :id="item.id"
                slot="input"
                type="checkbox"
                :name="item.code"
                :value="item.libelle"
                :checked="checked"
                @click="checkItems()"
              >

mais je te remercie sincèrement d'avoir jeté un oeil.

Ca fait le travail, mais je pense que c'est un peu naïf comme façon de faire.

01/03/2021, 17h50
NoSmoking
Citation:

Ca fait le travail, mais je pense que c'est un peu naïf comme façon de faire.

peut-être un peu compliqué lorsqu'un simple :
Code:

1 2 3 4 5 checkItems() { const nbrChecked = document.querySelectorAll(":checked").length; this.messageMax = nbrChecked > 4; this.messageMini = nbrChecked < 1; }
devrait suffire !
02/03/2021, 10h52
pitchounvivi

Re,

Merci. Effectivement c'est beaucoup plus réduit et ça fait aussi le travail.

Parfait !

Bonjour,

La discussion est résolue, mais je trouve que passer par le dom, c'est dommage... là on est dans un exemple tout bête, mais quand les valeurs cochées viennent par exemple d'un store qui peut être mis à jour ailleurs, ca ne marche plus. C'est quand même plus élégant (IMO) d'avoir un modèle derrière les formulaires.
De plus, des librairies comme vuelidate permettent de faire de la validation attendront un modèle pour décrire les contraintes de validité d'un formulaire...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template> <div> <input type="checkbox" v-for="(item, index) in items" :key="index" v-model="selectedItems" /> Nb cochée(s) {{selectedItems.length}} </div> </template> <script> // ... setup() { return { selectedItems: ref([]), }; } </script>