Masquer du texte avec une checkbox
Cher Tous,
Je m'occupe d'un site sur la base de WP.
Je souhaite faire une page qui liste du texte + image de différents restaurants (une image, le nom du restaurent avec la possibilité de cliquer dessus pour accéder à une page dédiée au restaurent).
Je souhaite pouvoir trier les restaurants de cette liste selon différents critères (ex. italien, japonais, français, etc.).
L'idée étant que la page affiche tous les restaurants ainsi que des checkbox en haut de page. En cochant la case "italien", tous les restaurants avec l'ID "italien" s'affichent et tous les autres sont masqués. Etc avec les autres checkbox.
Vous trouverez ci-dessous mon code. Le problème est double :
1. je souhaite que tout soit cocher à l'ouverture de la page
2. lorsque je clique actuellement sur le bouton tout cocher, cela fonctionne, cependant, les <div> ne s'affichent pas...
Merci d'avance pour votre aide :)
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
|
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
function showMe2 (it) {
var vis = document.getElementById(it).style.display
if (vis == "block") { document.getElementById(it).style.display = "none"; }
else { document.getElementById(it).style.display = "block"; }
}
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
while (Chckbox!=null) {
if (Chckbox.nodeName=="INPUT")
if (Chckbox.getAttribute("type")=="checkbox") {
blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
}
Chckbox = Chckbox.nextSibling;
}
}
//-->
</script> |
Puis dans Body :
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
|
<form>
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck','0');">
<br /
<div id="div_chck">
<input onclick="showMe('div1', this)" type="checkbox" name="c1" id="checkbox1" value="1"><label for="checkbox1">Choix 1</label>
<br />
<input onclick="showMe('div2', this)"type="checkbox" name="c2" id="checkbox2" value="2"><label for="checkbox2">Choix 2</label>
<br />
<input onclick="showMe('div3', this)"type="checkbox" name="c3" id="checkbox3" value="3"><label for="checkbox3">Choix 3</label>
<br />
<input onclick="showMe('div4', this)"type="checkbox" name="c4" id="checkbox4" value="4"><label for="checkbox4">Choix 4</label>
<br />
<input onclick="showMe('div4', this)"type="checkbox" name="c5" id="checkbox5" value="5"><label for="checkbox5">Choix 5</label>
</div>
</form>
<div id="div1" style="display: none;">
<a href="xxx"><img class="yyy" alt="" width="150" height="150" /></a>
Texte
</div>
<div id="div2" style="display: none;">
<a href="xxx"><img class="yyy" alt="" width="150" height="150" /></a>
Texte
</div>
<div id="div3" style="display: none;">
<a href="xxx"><img class="yyy" alt="" width="150" height="150" /></a>
Texte
</div>
<div id="div4" style="display: none;">
<a href="xxx"><img class="yyy" alt="" width="150" height="150" /></a>
Texte
</div>
<div id="div5" style="display: none;">
<a href="xxx"><img class="yyy" alt="" width="150" height="150" /></a>
Texte
</div> |
