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