Personnaliser une checkbox avec deux images simplement

**JeanJean75** · 15/11/2009, 17h33

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 ?

**Auteur** · 15/11/2009, 17h54

bonjour,

le code JS :

Code javascript :

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

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

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

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

**JeanJean75** · 15/11/2009, 19h07

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

Code :

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

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

Code :

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

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>

**Auteur** · 15/11/2009, 19h40

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

**JeanJean75** · 15/11/2009, 22h33

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 :

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

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

Code :

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

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.

**julioooo** · 16/11/2009, 16h59

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.

**E.Bzz** · 16/11/2009, 17h04

Bonjour,

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

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 :

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

alert(obj.src.toLowerCase());

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

A+

**SpaceFrog** · 16/11/2009, 17h07

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

**julioooo** · 16/11/2009, 17h37

ou sinon

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

**SpaceFrog** · 16/11/2009, 18h40

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 .

**Auteur** · 16/11/2009, 21h29

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

Code :

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

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"
	}

**JeanJean75** · 17/11/2009, 19h15

Merci pour cette dernière méthode elle fonctionne particulièrement bien.

**le_chomeur** · 18/11/2009, 00h02

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/

**SpaceFrog** · 18/11/2009, 08h24

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