Hello

J'ai plusieurs tableaux qui sont affich�es par une boucle.
Dans ces tableaux j'ai ajout� des inputs checkbox pour pouvoir s�lectionner toutes les lignes et des checkbox pour chacune des lignes.
J'ai r�ussi � faire des choses : les �l�ments se mettent bien dans mon array et les cases sont bien checked ou non checked comme il faut.
Probl�me : lorsque je clique par exemple sur mes deux premiers checkbox de mes deux premieres lignes et qu'ensuite je clique sur l'input pour tout s�lectionner => la s�lection s'inverse. C'est � dire qu'au lieu d'avoir 1, 2, 3, 4, 5, 6 par exemple j'ai 3, 4, 5, 6 puisque les 1, 2 sont supprim�s.
C'est logique vu mon code, mais je ne vois pas comment faire pour me d�p�trer de tout �a maintenant .. je m'y suis sans doute pas forc�ment bien prise au d�part... Une id�e pour m'aider ?

J'utilise Vue JS et AntDesign mais le probl�me est purement du javascript... Comment faire marcher le SELECT ALL dans le cas de tableaux g�n�r�s � la vol�e dynamiquement en gros cela pourrait r�sumer le souci...

Merci de votre aide !

Voici le bout de javascript qui correspond ainsi que le html qui affichent les tableaux :
Code : S�lectionner tout - Visualiser dans une fen�tre � part
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 data() {
    return {
      listQuestions:[],
      columns,
      selectCheck: [],
    }
  },
 onClickCheckAll(value) { //when click to all chekckbox
      console.log("click")
      console.log(value)
      console.log(value.sousDimensions)
 
      for (var sousdim of value.sousDimensions)
      {
        for (var item of sousdim.questions)
        {
          console.log(this.selectCheck)
 
          const p = this.selectCheck.indexOf(item.id) //looking for index for each item
 
          const checkboxItem = document.querySelector("#choice-" + item.id) //all inputs with id choice-ID and then add or remove "checked" attribute
 
          if (p > -1) { //if still there, delete
            this.selectCheck.splice(p, 1);
 
            if (!item.barometre)
            {
              checkboxItem.checked=false
            }
 
          }
          else { //if not, adding in array
            this.selectCheck.push(item.id)
            checkboxItem.checked=true
          }
 
        }
      }
    },
 
    onClickOneCheckbox(val) {
 
      const index = this.selectCheck.indexOf(val);
      if (index > -1) //delete item if still in the array
      {
        this.selectCheck.splice(index, 1);
      }
      else
      {
        this.selectCheck.push(val)
      }
 
      console.log(this.selectCheck)
    }

Code html : S�lectionner tout - Visualiser dans une fen�tre � part
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
  <div v-for="(dimension, index) in listQuestions" :key="index" :header="`${dimension.name}`">
 
            <table class="table-questions" >
 
                <thead>
                  <tr>
                    <th><input type="checkbox" @click="onClickCheckAll(dimension)"  /></th>
                    <th>Sous-dimension</th>
                    <th>Item</th>
                  </tr>
                </thead>
 
                <tbody v-for="(question,i) in dimension.sousDimensions" >
 
                  <tr v-for="(item, p) in question.questions">
 
                    <!--some questions "barometre" disabled and checked by default-->
                    <td v-if="item.barometre"><input type="checkbox" checked disabled :id="'choice-' + item.id"/></td>
                    <td v-else ><input type="checkbox" @click="onClickOneCheckbox(item.id)"  :id="'choice-' + item.id" /> </td>
                    <td style="width: 40%">{{question.name}}</td>
                    <td >{{item.item}}</td>
 
                  </tr>
 
                </tbody>
 
            </table>
 
 
          </div>

Pour plus de facilit� : ici mon probl�me : https://jsfiddle.net/chtouk/rc80ksno/35/