Attribuer une valeur à un type radio en fonction de display, id, attributs de données

Version imprimable

Bonjour tout le forum,

Je souhaite attribuer une valeur à des "type radio" s'ils sont affichés à l'écran et suivant le nombre d'affichés. C'est l'utilisateur qui choisit les colonnes qu'il souhaite afficher.
Code:

1 2 3 4 5 6 7 8 <td data-ordre="1" style="display: none;" class="basF"><input type="radio" name="1" id="capacite1_1_2" value="1"/></td> <td data-ordre="2" class="basF"><input type="radio" name="1" id="capacite1_1_3" value="2"/></td> <td data-ordre="3" class="basF"><input type="radio" name="1" id="capacite1_1_4" value="3"/></td> <td data-ordre="4" class="basF"><input type="radio" name="1" id="capacite1_1_5" value="4"/></td> <td data-ordre="5" style="display: none;" class="basF"><input type="radio" name="1" id="capacite1_1_6" value="5"/></td> <td data-ordre="6" class="basF"><input type="radio" name="1" id="capacite1_1_7" value="6"/></td> <td data-ordre="7" style="display: none;" class="basF"><input type="radio" name="1" id="capacite1_1_8" value="7"/></td> <td data-ordre="8" style="display: none;" class="basF"><input type="radio" name="1" id="capacite1_1_9" value="8"/></td
Dans cet exemple, je dois attribuer :

La valeur 0 au type radio de la colonne data-ordre="2"

Pour les autres, je dois répartir 8 points, comme ici il y a 3 autres colonnes.

La valeur 8/3 au type radio de la colonne data-ordre="3"
La valeur 16/3 au type radio de la colonne data-ordre="4"
La valeur 24/3 au type radio de la colonne data-ordre="6"

Au moment où l'utilisateur sélectionne ses colonnes, je compte le nombre de colonnes affichées dans l'en-tête.
Code:

1 2 3 4 5 6 7 8 9 function compterVisible() { let nbCoche = 0; for (let i = 1; i <= 8; i++) { let celluleTh = document.querySelectorAll("th[data-ordre='" + i + "']"); if (celluleTh[0].style.display == "") { nbCoche++; } } }
Je n'arrive pas à sélectionner le bon type radio et à lui attribuer la valeur.

Comment faire ? Utiliser querySelector ? getElementById ? getElementsByName ?

J'ai fait plusieurs tentatives sans succès.

Mon code complet ici

Merci pour votre aide.

29/10/2021, 14h58
jreaux62

Bonjour,

class="basF" semble être le dénominateur commun.
Donc je dirais :

Code:

document.querySelectorAll('.basF');

Par contre, ce sont des <td> pas des <th>...

Et concernant la répartition des points, il faudrait mieux expliquer, car je n'ai rien compris au 8/3, 16/3, 24/3...
29/10/2021, 15h35
kewan

Bonjour,

Il faut que j'attribue une valeur uniquement aux "types radio" qui sont dans une colonne visible. Donc les "types radio" qui ne sont pas dans une colonne avec style="display: none;"

Je me sers des th visibles pour compter le nombre de colonnes qu'a sélectionné l'utilisateur.

Et fonctionne de ce nombre de colonnes, j'attribue pour chaque "types radio" une valeur.

Les "types radio" doivent permettre d'évaluer de 0 à 8.

Le premier type radio aura toujours pour valeur 0.
Le dernier type radio aura toujours pour valeur 8.

Pour les autres, leur valeur dépendra du nombre de colonnes affichées par l'utilisateur.

D'après ce que j'ai compris :

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
// --------------------------
function repartition_8_points()
{
  var basF_all = document.querySelectorAll('.basF');
  // on filtre ceux uniquement affichés
  var basF_all = [].filter.call(basF_all, function(el) {
    var style = window.getComputedStyle(el);
    return (style.display !== 'none')
  });
  var nbre = basF_all.length; // nombre de cases visibles
  for( var i=0; i<nbre; i++ )
  {
    //console.log( basF_all[i].querySelector('input').id ); // test
    if( i == 0 ) // premier
    {
      basF_all[i].querySelector('input').value = 0;
    } 
    else if( i == nbre-1 ) // dernier
    {
      basF_all[i].querySelector('input').value = 8;
    } else {
      // ????
    }
  }
};
// --------------------------

Citation:

Envoyé par kewan

Pour les autres, leur valeur dépendra du nombre de colonnes affichées par l'utilisateur.

Citation:

"Ca dépend, ça dépasse..."
Le Père-Noël est une ordure

Re jreaux62, merci pour ton code.

Malheureusement je n'arrive pas à le faire fonctionner :(.

J'ai tenté d'en faire un, ça fonctionne, mais coté optimisation :weird:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
function attribuerValeur() {
   let nbCoche = 0;
  // Pour chaque niveaux d'évaluation
  for (let i = 1; i <= 8; i++) {
    let celluleTh = document.querySelectorAll("th[data-ordre='" + i + "']");
    // Si la colonne est affichée
    if (celluleTh[0].style.display == "") {
      nbCoche++;
    }
  }
  // alert("nb niveaux cochés : " + nbCoche);
 
 
  let compteurColonneAffichees = 0,
    nbNiveauxEval = 8,
    nbCompetences = 3;
 
 
  // Pour chaque compétence
  for (let competence = 1; competence <= nbCompetences; competence++) {
    if (competence == 1) {
      nbCriteresOperationnels = 5;
      bareme = 8;
    }
    if (competence == 2) {
      nbCriteresOperationnels = 6;
      bareme = 6;
    }
    if (competence == 3) {
      nbCriteresOperationnels = 9;
      bareme = 6;
    }
    let valeur = bareme / (nbCoche - 1);
 
 
    // alert("Competence : " + competence + "\nNbCriteresOperationnels : " + nbCriteresOperationnels + "\nbareme : " + bareme + "\nValeur : " + valeur);
 
 
    // Pour chaque critère opérationnel
    for (
      let criteresOperationnels = 1;
      criteresOperationnels <= nbCriteresOperationnels;
      criteresOperationnels++
    ) {
      // Pour chaque niveau d'évaluation
      for (let niveauEval = 1; niveauEval <= nbNiveauxEval; niveauEval++) {
        let colonne = document.querySelector(
          "td[data-ordre='" + niveauEval + "']"
        );
 
 
        // Si la colonne est affichée
        if (colonne.style.display == "") {
          compteurColonneAffichees++;
 
 
          let radio = document.getElementById(
            "competence" +
              competence +
              "_" +
              criteresOperationnels +
              "_" +
              niveauEval
          );
 
 
          // Pour la première colonne
          if (compteurColonneAffichees == 1) {
            radio.value = 0;
            // alert("Competence : " + competence + "\nCritères opérationnels : " + criteresOperationnels + "\nNiveauEval : " + niveauEval + "\nvaleur : 0 point");
          }
 
 
          // Pour toutes les autres colonnes
          if (compteurColonneAffichees > 1) {
            radio.value = valeur;
            // alert("Competence : " + competence + "\nCritères opérationnels : " + criteresOperationnels + "\nNiveauEval : " + niveauEval + "\nvaleur : " + valeur + " points");
            valeur += bareme / (nbCoche - 1);
          }
        }
      }
      // Réinitialiser pour les critères opérationnels suivants
      compteurColonneAffichees = 0;
      valeur = bareme / (nbCoche - 1);
    }
  }
}

Tout mon code est ici => https://codepen.io/kewan/pen/vYJJaEj
Avec le petit tableau, l'utilisateur sélectionne les niveaux d'évaluation souhaités.
Les valeurs de chaque type radio sont attribuées automatiquement.