Personnaliser une checkbox avec deux images simplement

Version imprimable

15/11/2009, 17h33
JeanJean75

Personnaliser une checkbox avec deux images simplement

Bonsoir,

Je viens vous consulter car je souhaite réaliser une checkbox à l'aide de deux images, une coché, l'autre non.

Cependant, j'ai pas mal cherché sur internet, mais tout ce que j'ai trouvé, se sont des code à rallonge.

Ne connaissant que très très peu le JS, j'aimerais quelque chose de simple.

Vous auriez ça sous la main ? ;)

bonjour,

le code JS :

Code:

1
2
3
4
5
6
7
function clickChk(obj)
{
	if (obj.src.toLowerCase()=='decoche.jpg')
		obj.src = "coche.jpg";
	else
		obj.src = "decoche.jpg";
}

le code HTML

Code:

1
2
 
<img src="decoche.jpg" alt="" onclick="clickChk(this)" />

Merci de ta réponse, mais ça ne change rien chez moi. La checkbox reste la même. :/

Code:

1
2
3
<form>
     <input type="checkbox" name="Checkbox" onclick="clickChk(this)" />
</form>

Code:

1
2
3
4
5
6
7
8
9
<script laguage="Javascript">
	function clickChk(obj)
	{
		if (obj.src.toLowerCase()=='images/case.png')
			obj.src = "/images/caseonon.png";
		else
			obj.src = "images/case.png"
	}
</script>

;)

15/11/2009, 19h40
Auteur

j'ai utilisé une balise <img> pas une balise <input>

Ok, mais est ce que cela sera pris en comptes par le formulaire comme une checkbox ?

La case non coché s'affiche bien, mais quand je clique rien ne fonctionne. :/

Code:

<img src="images/case.png" alt="" onclick="clickChk(this)" />
Code:

1 2 3 4 5 6 7 8 9 <script laguage="Javascript"> function clickChk(obj) { if (obj.src.toLowerCase()=='images/case.png') obj.src = "/images/caseonon.png"; else obj.src = "images/case.png" } </script>
Merci et bonne soirée. ;)

16/11/2009, 16h59
julioooo

Citation:

Ok, mais est ce que cela sera pris en comptes par le formulaire comme une checkbox ?

Non mais rien ne t'empêche dans ta fonction d'alimenter un input type hidden de ton formulaire avec la valeur que tu souhaites.
16/11/2009, 17h04
E.Bzz

Bonjour,

Citation:

Envoyé par julioooo

Non mais rien ne t'empêche dans ta fonction d'alimenter un input type hidden de ton formulaire avec la valeur que tu souhaites.

+1

Citation:

Envoyé par JeanJean75

La case non coché s'affiche bien, mais quand je clique rien ne fonctionne.

Tu ne testes peut être pas la bonne valeur. Ajoute

Code:

alert(obj.src.toLowerCase());

en début de fonction pour vérifier ...

A+
16/11/2009, 17h07
SpaceFrog

avec une seule image et en modifiant le background-positon ...

ou sinon

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
 
<html>
	<head>
		<title>Developpez</title>
		<style>
			#case{
				width: 16px;
				height: 16px;
			}
			.nonCoche{
				background: transparent url(nonCoche.gif) no-repeat;
			}
			.coche{
				background: transparent url(coche.gif) no-repeat;
			}
		</style>
	</head>
	<body>
		<form id="monForm" action="http://developpez.com">
			<div class="nonCoche" id="case" onclick="handleCocheClick()"></div>
			<input type="hidden" id="laCoche" name="cocheParam" value="false"/>
			<input type="submit" value="envoyer" />
		</form>
		<script>
			function handleCocheClick(){
				var cocheImg = document.getElementById("case");
				var hiddenField = document.getElementById("laCoche");
				if(cocheImg.className=="nonCoche"){
					hiddenField.value="true";
					cocheImg.className="coche";
				}else{
					hiddenField.value="false";
					cocheImg.className="nonCoche";
				}
			}
		</script>
	</body>
</html>

enfin ca revient au même que le background-position

16/11/2009, 18h40
SpaceFrog

Citation:

enfin ca revient au même que le background-position

pas tout à fait ... une seule image est plus rapide , vu qu'il n'y a qu'une image a gérer .

Pour src c'est le chemin absolu qui est retourné, il faut donc ruser un peu :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
	function clickChk(obj)
	{
		var fic = RegExp("(nonCoche.gif)$","gi");
 
 
		if (fic.test(obj.src))
			obj.src = "images/coche.gif";
		else
			obj.src = "images/nonCoche.gif"
	}

17/11/2009, 19h15
JeanJean75

Merci pour cette dernière méthode elle fonctionne particulièrement bien. ;)
18/11/2009, 00h02
le_chomeur

heuu et avec un bouton de type image , dont on change la source + la value a true ou false ???

sinon : http://www.flog.co.nz/journal/arc-ad...customisation/
18/11/2009, 08h24
SpaceFrog

seul souci avec les boutons type image c'est qu'il declenchent la soumission du form avec la touche enter, mais un input type button dont on fait varier le backgroud position devrait être une bonne solution
18/11/2009, 09h15
le_chomeur

Sauf erreur de ma part, dans un formulaire , même sans input de type submit ou boutton , l'appui sur entrée , valide le formulaire :)
18/11/2009, 09h17
SpaceFrog

non
sans input type submit ou sans input type image le bouton entrée ne valide pas le formulaire
18/11/2009, 10h10
le_chomeur

ok merci de l'info :)