Discussion :

[hbge12]

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 :

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

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
 
<form>
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<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>

[NoSmoking]

Bonjour,
la fonction de cochage/décochage ne marche pas sous IE eu égard l'utilisation de firstChild;

Si tu veux que cela fonctionne il te faut, dans le HTML, coller la balise du 1st INPUT à la balise DIV

Code html :

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

<div id="div_chck"><input onclick="show...

J'aurais écrit un truc dans ce style

Code :

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

1
2
3
4
5
6
7
8
9
10
function GereChkbox(conteneur, a_faire) {
  var oDiv = document.getElementById(conteneur);
  var oInput = oDiv.getElementsByTagName('INPUT');
  var i, nb = oInput.length;
  for( i=0; i <nb; i++){
    if( oInput[i].type === "checkbox"){
      oInput[i].checked = a_faire >0 ? true : false;
    }
  }
}

[hbge12]

Merci pour ces précisions.

Cependant, mes deux objectifs, à savoir que tout soit cocher à l'ouverture de la page et le fait que lorsque je clique actuellement sur le bouton tout cocher, cela fonctionne, cependant, les <div> ne s'affichent pas ne sont pas résolus...

L'idée est d'avoir une zone de checkbox qui permet d'affiner la recherche...

Merci d'avance pour votre aide

HB

[NoSmoking]

ajoutes showMe( 'div' +oInput[i].value, oInput[i]); dans ta fonction GereChkbox.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function GereChkbox(conteneur, a_faire) {
  var oDiv = document.getElementById(conteneur);
  var oInput = oDiv.getElementsByTagName('INPUT');
  var i, nb = oInput.length;
  for( i=0; i <nb; i++){
    if( oInput[i].type === "checkbox"){
      oInput[i].checked = a_faire >0 ? true : false;
      showMe( 'div' +oInput[i].value, oInput[i]);
    }
  }
}

c'est simplifiable mais bon...!

[hbge12]

Merci beaucoup NoSmoking.

Le code fonctionne à merveille

Une dernière petite question : Je souhaite que la première checkbox soit cochée et affiche le <div>.

J'ai bien tenté de rajouter cela : checked="checked"

Code :

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

<input onclick="showMe('div1', this)" type="checkbox" name="c1" id="checkbox1" value="1" checked="checked" ><label for="checkbox1">Choix 1</label>

Mais cela ne fonctionne malheureusement pas. Le <div1> ne s'affiche pas lors du chargement de la page.

Merci d'avance et bravo pour ce super forum.

HB

[NoSmoking]

il te faut deux choses
1/ mettre checked="checked" sur ton premier INPUT
2/ ajouter ce morceau de code sur le onload de ta page

Code :

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

showMe('div1', document.getElementById('checkbox1'));

[hbge12]

Un grand merci à NoSmoking.