Afficher/cacher suivant état checkbox

Version imprimable

26/05/2016, 17h53
yurispy

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

Si j'ai plusieurs id="madiv"
genre
Code:

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.
26/05/2016, 18h42
NoSmoking

Bonjour,

Citation:

Si j'ai plusieurs id="madiv"

http://www.developpez.com/template/kit/kiterror.png une ID DOIT être UNIQUE

Passe par une classe dans ce cas .

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

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
<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:

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>

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:

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

et en définissant la fonction comme suit
Code:

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 ;)

28/05/2016, 16h42
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:

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.

Dans ton code il convient de l'appeler comme suit
Code:

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

28/05/2016, 21h09
yurispy

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