Discussion :

[yurispy]

Bonjour,
j'aimerais afficher/cacher des élements, mais je bloque sur un points.

Si j'ai plusieurs id="madiv"
genre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="madiv" style="display:none;"><p>blabla</p></div>
<div id="madiv" style="display:none;"><p>blabla</p></div>
<div id="madiv" style="display:none;"><p>blabla</p></div>

Quand l'on clic sur l'un des boutons cela n'en affiche qu'une seule au lieu des 3.

Mon but est faire un tableau classique html et cacher des colonnes suivants les checkbox.

Merci de votre aide.

[NoSmoking]

Bonjour,

Si j'ai plusieurs id="madiv"

	une ID DOIT être UNIQUE

Passe par une classe dans ce cas .

[yurispy]

Bonsoir.
Bon j'ai pas beaucoup avancé et cela ne fonctionne qu'une seule fois....

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
31
32
33
34
35
36
37
38
<li id="choix"><label>Choix: </label>
	<ol class="checkboxes">
		<li>
			<input type="checkbox" id="name" />
			<label for="choix_1">choix 1</label>
		</li>
		<li>
			<input type="checkbox" id="qte" />
			<label for="choix_2">choix 2</label>
		</li>
		<li>
			<input type="checkbox" id="dose" />
			<label for="choix_3">choix 3</label>
		</li>
	</ol>
</li>
<table width="100%" border="0">
  <tr>
    <td class="123" style="display:;"><p>Colonne 1</p></td>
    <td class="456" style="display:;"><p>Colonne 2</p></td>
    <td class="789" style="display:;"><p>Colonne 3</p></td>
  </tr>
  <tr>
    <td class="123" style="display:;"><p> 1</p></td>
    <td class="456" style="display:;"><p> 2</p></td>
    <td class="789" style="display:;"><p> 3</p></td>
  </tr>
  <tr>
    <td class="123" style="display:;"><p> 1</p></td>
    <td class="456" style="display:;"><p> 2</p></td>
    <td class="789" style="display:;"><p> 3</p></td>
  </tr>
  <tr>
    <td class="123" style="display:;"><p> 1</p></td>
    <td class="456" style="display:;"><p> 2</p></td>
    <td class="789" style="display:;"><p> 3</p></td>
  </tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
var chckd = document.getElementById("qte");
chckd.addEventListener("change", function(){
	var a = document.getElementsByClassName("456");
	var b = Array.prototype.some.call(chckd, function(box){ return box.checked; });
	for (i=0; i<a.length; i++){
		a[i].style.display = b ? "" : "none";
	}
});
 
 
</script>

[NoSmoking]

Point 1 :
Ne pas faire commencer les noms de classe CSS par un chiffre (4.1.3 Characters and case).
Autant mettre des noms parlant, par exemple dans le cas que tu nous montres, col-1, col-2 et col-3 par exemple .

Point 2 :
Que cherches tu à faire quand tu écris var b = Array.prototype.some.call(chckd, function(box){ return box.checked; }) ?
Au moment de l’exécution b = this.checked tout simplement.

Point 3 :
Il te faut factoriser cette fonction pour pouvoir l'utiliser pour tes autres <input type="checkbox".
En ajoutant une value, par exemple, contenant la « class » des éléments à masquer/afficher et en la récupérant dans la fonction cela devient plus général.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="checkbox" id="qte" value="col-2">

et en définissant la fonction comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function showHide() {
    var a = document.querySelectorAll('.' +this.value); // le . pour signifier une classe
    var b = !this.checked;
    var i,  nb = a.length;
    for (i = 0; i < nb; i += 1) {
        a[i].style.display = b ? '' : 'none';
    }
}

tu pourras l'appliquer à tous tes <input type="checkbox">.

Point 4 :
A toi de jouer

[yurispy]

Sur ton point 1 merci je n'en savais rien. J'ai mis ça pour faire des tests pour trouver une solution à mon problème.

sinon je n'y arrive pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var a = document.querySelectorAll('.' +this.value); // le . pour signifier une classe

Sa ne me sors jamais rien même en regardant dans la console chrome.
du fait que tu en es fait une fonction, il faut un appel également. J'ai testé et idem.

Je suis juste un bidouilleur et j'ai beaucoup de mal, dommage car j'adore tout ce que l'on peut faire avec javascript mais j'ai du mal a y comprendre quelque chose.

[NoSmoking]

Dans ton code il convient de l'appeler comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var chckd = document.getElementById("qte");
chckd.addEventListener("change", showHide);

[yurispy]

Énorme merci, il me reste plus qu'a trouver une solution pour sauvegarder l'état pendant plusieurs jours, genre cookie pour chaque checkbox.