Checkbox personnalisées non affectées par code JS.

**Shakuro** · 02/12/2010, 22h03

Bonsoir à tous;

Novice en la matière j'ai tout de même pu personnaliser le skin de mes checkbox avec un code relativement propre que j'ai trouvé sur le net.

Résultat ICI

Cependant, j'ai essayé de récupérer un autre code .js permettant quant-à lui de limiter le choix des checkbox, je les collés et edité, mais il ne semble pas affecté mes checkbox personnalisés.

En revanche lorsque je retire la partie de js correspondant à la personnalisation du skin des checkbox, sa fonctionne...

Voici mon code php:

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
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="texte/html; charset=UTF-9" />
<script type="text/javascript" language="Javascript" src="jquery.js" ></script>
<script type="text/javascript" language="Javascript" src="checkbox.js" ></script>
 
<title>Ma page</title>
<style type="text/css" >
 
<!--
	body,td,th { 
	font-family: Arial, Verdana, serif; 
	color: #fff; 
	font-size: x-small; 
	}
 
.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(http://peexstudio.fr/fr/formulaire_de_commande/checkbox.png) no-repeat;
	display: block;
}
.radio {
	background: url(radio.gif) no-repeat;
}
.select {
	position: absolute;
	width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(select.gif) no-repeat;
	overflow: hidden;
}
-->
 
</style>
</head>
<body bgcolor="#000">
 
<form id="formulaire" action="contact-2.php" method="post">
	<input type="checkbox" name="champ[]" value="Affiche" class="styled" onclick="limite_check(this.name, 1);"/></p>
	<input type="checkbox" name="champ[]" value="Carte de visite" class="styled" onclick="limite_check(this.name, 1);"/></p>
	<input type="checkbox" name="champ[]" value="Logo" class="styled" onclick="limite_check(this.name, 1);"/></p>
</form>
 
</body>
</html>

Et voici la partie .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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/* Limitation de choix pour les checkboxes: Reglage */
 
function limite_check(nom_champ, nbre_limit) {
var nbre = 0;
var nbre_check = 0;
 
nom = document.getElementById('formulaire').elements[nom_champ];
nbre_check = nom.length;
 
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == true)
nbre++;
}
 
if(nbre >= nbre_limit) {
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == false)
nom[i].disabled = true;
}
}
else {
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == false)
nom[i].disabled = false;
}
}
}
 
/* Valeurs de déplacement du block transparent */
 
var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";
 
 
/* Ne pas toucher */
 
 
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
 
var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;
 
				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;

Pourriez-vous m'éclairer?

**gwinyam** · 03/12/2010, 11h15

Essaie d'abord de ne pas "récupérer" des bouts de code à droite à gauche. Certes, ça peut permettre de gagner du temps, mais c'est surtout un nid à bugs et à trucs inutiles.

J'ai pas tout regardé en détail, pas le temps là, mais est-ce que tout le code JS que tu remontes est intégralement nécessaire à ce que tu veux faire? Je trouve qu'il y en a beaucoup juste pour "limiter l'usage des checkbox". D'ailleurs, ça serait bien que tu définisses exactement ce que tu entends pas là.

**Shakuro** · 03/12/2010, 11h30

Merci Gwinyam de m'avoir apporté ta réponse, j'ai visité pas mal de fofo, et personne ne me répond...

Le script .js que j'ai posté comprend l'ensemble de mon code actuelle, sa ne concerne pas uniquement la limitation des checkbox mais la majorité du script concerne le skin des inputs radios, checkbox et select.

La partie "limitation des checkbox" c'est celle-là:

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
/* Limitation de choix pour les checkboxes: Reglage */
 
function limite_check(nom_champ, nbre_limit) {
var nbre = 0;
var nbre_check = 0;
 
nom = document.getElementById('formulaire').elements[nom_champ];
nbre_check = nom.length;
 
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == true)
nbre++;
}
 
if(nbre >= nbre_limit) {
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == false)
nom[i].disabled = true;
}
}
else {
for(i = 0; i < nbre_check; i++) {
if(nom[i].checked == false)
nom[i].disabled = false;
}
}
}

et la partie php, auquel le script est associé c'est ça:

Code :

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

1
2
3
4
<form id="formulaire" action="contact-2.php" method="post">
	<input type="checkbox" name="champ[]" value="Affiche" class="styled" onclick="limite_check(this.name, 1);"/></p>
	<input type="checkbox" name="champ[]" value="Carte de visite" class="styled" onclick="limite_check(this.name, 1);"/></p>
	<input type="checkbox" name="champ[]" value="Logo" class="styled" onclick="limite_check(this.name, 1);"/></p>

Enfaite j'aimerais simplement que l'internaute ne puisse sélectionner qu'une seul et même checkbox, contrairement à se qui peut être fait actuellement: ICI

Suis-je un peut plus clair?

**gwinyam** · 03/12/2010, 12h13

Si tu ne veux qu'une seule checkbox à la fois, t'embêtes pas, fait des boutons radio, c'est plus simple et ça le gère de lui-même

http://www.w3schools.com/html/html_forms.asp (section "radio buttons")

**RomainVALERI** · 03/12/2010, 13h54

Envoyé par gwinyam

Si tu ne veux qu'une seule checkbox à la fois, t'embêtes pas, fait des boutons radio, c'est plus simple et ça le gère de lui-même

http://www.w3schools.com/html/html_forms.asp (section "radio buttons")

+1 ^^

@Shakuro : non seulement tu essayais de réinventer la roue, mais en moins bien, et en faisant des choix qui vont détériorer l'ergonomie de ton interface en déroutant les utilisateurs, qui connaissent bien la différence d'utilisation entre boutons radio et checkbox, à force d'en avoir des tonnes partout depuis vingt ans

**Shakuro** · 03/12/2010, 14h34

Merci à vous deux pour vos réponses ^^, je pensais que d'un point de vue esthétique c'était plus beau de coché son type de création.

Je vais les changer en "radio" et redéfinir un skin particulier pour les premières radios du formulaire dans ces cas là. Merci à vous

**gwinyam** · 03/12/2010, 14h49

Il y a déjà un style pour les boutons radios si tu fouilles un peu le code que t'as récupéré. Et qui correspond aux styles du reste de la page.

Pense cependant à quelque chose de très important qui a été beaucoup oublié aux débuts du web: les gens préfèrent un truc qui marche très bien tout le temps à ses qualités techniques ou son esthétisme. C'est du bonus ça, important mais bonus.

Et rien ne t'interdit de donner un style radio à tes checkbox

**Shakuro** · 03/12/2010, 17h38

Et rien ne t'interdit de donner un style radio à tes checkbox

Tu veux surement dire: "donner un style checkbox à mes radios" ? si t-elle est le cas, figure toi que j'y est pensé et c'est une très bonne idée! je sais pas pourquoi je n'y est pas pensé plus tôt. Merci en tout cas pour les infos

Bon weekend à vous!

**gwinyam** · 03/12/2010, 17h50

Euh oui au temps pour moi

**RomainVALERI** · 03/12/2010, 17h56

Envoyé par Shakuro

Tu veux surement dire: "donner un style checkbox à mes radios" ? si t-elle est le cas, figure toi que j'y est pensé et c'est une très bonne idée! je sais pas pourquoi je n'y est pas pensé plus tôt. Merci en tout cas pour les infos

Comme je te le disais plus haut, à mon avis tu te tires une balle dans le pied en termes d'ergonomie

(mais bon c'est ton pied hein

)

**Shakuro** · 03/12/2010, 19h09

@ RomainVALERI:

Je vais t'appeler, Romain Le Sage

J'en suis conscients, mais c'est mon tout premier site internet, et je veux faire le buzz auprès de ma futur école ^^. Donc je tiens à mettre un peux de checkbox :p. Mais promis à l'avenir j'y penserais à deux fois avant de faire ma maquette

Checkbox personnalisées non affectées par code JS.

JavaScript

Discussions similaires

Partager

Partager