Discussion :

[sinifer]

bonjour,

après mainte recherche sur mon problème je fait appel a vous.

je voudrais avoir la possibilité que quand je sélectionne ce qui à dans mon <td> </td> sa valide ma case à coché.

j'ai un tableau dynamique qui affiche une image plus une case à coché, et je voudrais que si je clic sur l'image sa sélectionne la case à coché alors j'ai récupéré un bout de code et je l'ai adapté a mon scripte malheureusement je suis pas un as sur javascripte.

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
for ($j = 0; $j < $items_per_row[$i]; $j++) {	
			// Affichage des cartes indexées
			if ($row['form_image'] != '') {
				$image = $row['form_image'];
			} else {
				$image = $row['image_prefix'] . $index . '.jpg';
			}
			// Ajout automatique du / a la fin du path_to_images si pas present
			if ($path_to_images[strlen($path_to_images)-1] != "/") {
				$path_to_images .= "/";
			}
			$card_form .= '<td><img src="' . $path_to_images . $image . '" onclick='javascript:check("checkbox")'>';
			$card_form .= '<input type="checkbox" name="card_' . $index . '" value="1" id="checkbox" ><br /><br /></td>';			
			$index++;
		}
		$card_form .= '</tr>';
		$card_form .= '</table>';

mais j'ai une erreur sur cette ligne:

Code :

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

1
2
 
$card_form .= '<td><img src="' . $path_to_images . $image . '" onclick='javascript:check("checkbox")'>';

es-ce que quelqu'un peut m'aider à voir mon erreur.

Merci d'avance

[Séb.]

Il faut utiliser <label>.
Exemple :

Code :

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

1
2
<input type="checkbox" name="unebox" id="uneboxid">
<label for="uneboxid">Libellé de la checkbox (un clic cochera)</label>

[sinifer]

Pourquoi faire compliqué quant on peut faire simple.

En tous cas merci beaucoup sa marche nickel

[Séb.]

De rien

Dans l'exemple j'ai donné un NAME et un ID différents.
Tu pourras mettre les mêmes, ce n'est pas un pb.

[sinifer]

ok merci

Par contre sa marche pas sur Ie

[Séb.]

Par contre sa marche pas sur Ie

Arghh t'as testé quelle version de IE ?

[Séb.]

Essaie cette autre syntaxe, ça passera peut-être sous ton IE :

Code :

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

<label><input type="checkbox" name="unebox">(libellé)</label>

Plus besoin de FOR/ID.

[sinifer]

J'ai IE 8

mais sa marche toujours pas
peut être que sa viens de mon code?

Code :

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

1
2
3
4
 
$card_form .= '<td><label for="card_' . $index . '"><img src="' . $path_to_images . $image . '" /></label><br />';
 
$card_form .= '<input type="checkbox" name="card_' . $index . '" value="1" id="card_' . $index . '" ><br /><br /></td>';

[Séb.]

Je viens de tester ça sous un IE 8.0.6001.18702IC (ouf) et ça passe bien :

Code :

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

<input type="checkbox" id="foo"> <label for="foo">FOO LABEL</label>

Peux-tu nous montrer le HTML généré ?
As-tu testé en imbriquant la checkbox dans le <label> ?

[sinifer]

avec ce code là

Code :

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

1
2
3
 
$card_form .= '<td><label for="card_' . $index . '"><img src="' . $path_to_images . $image . '" /></label><br />';
$card_form .= '<input type="checkbox" name="card_' . $index . '" value="1" id="card_' . $index . '" ><br /><br /></td>';

sa me retourne sa en html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table width="600" align="center">
    <tr align="center">
        <td><label for="card_1"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_1" value="1" id="card_1" ><br /><br /></td>
        <td><label for="card_2"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_2" value="1" id="card_2" ><br /><br /></td>
        <td><label for="card_3"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_3" value="1" id="card_3" ><br /><br /></td>
        <td><label for="card_4"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_4" value="1" id="card_4" ><br /><br /></td>
        <td><label for="card_5"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_5" value="1" id="card_5" ><br /><br /></td>
        <td><label for="card_6"><img src="/images/card_verso.png" /></label><br /><input type="checkbox" name="card_6" value="1" id="card_6" ><br /><br /></td>
    </tr>
</table>

il me semble que tout est bon

[Séb.]

Apparemment c'est le clic sur l'image qui pose problème à IE8...

[sinifer]

ouai, je te confirme c'est l'image qui passe pas car quand j'écris et je click dessu sa marche mais pas quand je click sur la photo

[Séb.]

La dernière fois que je me suis préoccupé d'une compatibilité sous IE c'était il y a 8 ans.
Le retour en arrière est rude
Bon, faudra peut-être rajouter une pincée de JS.

[sinifer]

lol je te comprend mais moi je travail sous firefox mais pour être sur que tout est bon je vérifie toujours sous IE et souvent j'ai des déceptions.

en tous cas j'ai l'impression que je dois retourné à la case départ

[Séb.]

en tous cas j'ai l'impression que je dois retourné à la case départ

Mais nan sers-toi des ID et fais un truc dans le genre :

Code :

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

1
2
<input type="checkbox" id="foo">
<img src="..." onclick="var c = document.getElementById('foo') ; c.checked = ! c.checked">

[sinifer]

j'ai pris ma planche et ai surfé dans le web et j'ai vue qu'il fallait rajouter ce js:

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
 
	window.onload = function(){
		if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
		{
			var a = document.getElementsByTagName("label");
			for(var i=0,j=a.length;i<j;i++){
				if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
				{
					a[i].childNodes.item(0).forid = a[i].htmlFor;
					a[i].childNodes.item(0).onclick = function(){
						var e = document.getElementById(this.forid);
						switch(e.type){
							case "radio": e.checked|=1;break;
							case "checkbox": e.checked=!e.checked;break;
							case "text": case "password": case "textarea": e.focus(); break;
						}
					}
				}
			}
		}
	}

et sa marche, mais je vais tester ce que tu viens de me donner et te tiens au courant.

Merci en tous cas

[sinifer]

En tous grand merci pour ton aide et surtout de m'avoir appris l’existence de <labe> qui est bien utile.



Bonne journée