Associer un checkbox à un champ de texte

[n3x1n²]

Bonjour,

J'ai quelques choses comme ceci :






Je ne sais pas si c'est possible, car je n'arrive pas imaginer comment faire, d'associer le checkbox Win à l'input text Windows et pareil pour Mac.

J'aimerais créer cette association afin d'avoir un tableau associatif avec le label de checkbox et le contenu de l'input(la date).



Merci beaucoup !

[SpaceFrog]

il existe les balises label:

Code :

<label for="idducheckbox''>Win</label>

[n3x1n²]

si tu parles de ceci :http://giminik.developpez.com/xhtml/label.html
Alors t'as pas compris ce que je voulais faire.

Sinon
Jaimerais bien que tu t'exprimes un peu plus

[SpaceFrog]

Oui je parle bien de l'utilisation du label dans un formulaire.

C'est donc que je n'ai pas compris ton besoin .

Par contre je ne pense pas que ce soit en m'exprimant plus que je comprendrais mieux ton besoin.
Ne serait-ce pas plutot à toi d'essayer d'exprimer plus clairement ton but ?

[llaffont]

Envoyé par SpaceFrog

Ne serait-ce pas plutot à toi d'essayer d'exprimer plus clairement ton but ?

Je plussoie +1

[SpaceFrog]

merci ça me rassure de voir que je ne suis pas le seul a n'avoir pas tout saisi ...

[n3x1n²]

Bah si vous avez pas tout saisi c'est pas dur, vous n'avez qu'à demander

Alors puisque je parle d'association entre un checkbox et un champ de text, j'ai décidé de créer un tableau associatif.

Dans les commentaires du code, j'explique ce que je fais et j'ai une ou 2 questions que je pose donc si vous pouvez répondre, vous me rendrez un grand service.

Merci d'avance

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$win.click(function(){ 	
 
//####
 
$nomOS = $('input#checkWin'+monID).val(); //value = "windows"
$dateOS = $('input#pickWin'+monID).datepicker("getDate"); //date de datepicker
 
alert($dateOS); // Fri Oct 28 2011 00:00:00 GMT+0200 Puis-je avoir la date juste sous forme de "2011-07-01" ?
 
 
var itemOsDate = {"os": $nomOS, "date": $dateOS};
 
osDate.push(itemOsDate); //osDate est mon tableau assoc.
 
//j'extrais les données d'itemOsDate
var monOS = osDate[osDate.length-1].$nomOS; 
var dateOS = osDate[osDate.length-1].$dateOS;
 
alert(dateOS); // undefined... Quel est l'erreur dans "var dateOS" s'il vous plait ?
}

[Bovino]

L'éternel débat sur les tableaux associatifs
Etant donné qu'ils n'existent pas en JavaScript, tu ne peux pas avoir en même temps la méthode push() disponible sur osDate et des index non numériques.

[SpaceFrog]

heu si on te dit que ça n'existe pas ...
et si tu es si sur de ton fait, ne viens plus nous poser tes questions ???

[Bovino]

Ben voyons...
Je ne vais pas revenir sur le premier et le dernier lien ou les auteurs confondent un peu tout, d'ailleurs, si on reprend un des exemples, un petit test est assez éloquent :

Code :

1
2
3
4
5
var MonTableau = [];
MonTableau[0] = "Bonjour";
MonTableau["Pierre"] = 12;
MonTableau["Jean-François"] = 25;
alert(MonTableau.length); // renvoie 1...

Quant au deuxième lien, il précise bien

L'objet Array en JavaScript n'est pas un tableau associatif. Il est certes possible de lui assigner des clés et des valeurs, mais dans ce cas il perd les attributs et méthodes de tableau, il devient en fait un simple objet.

[n3x1n²]

Envoyé par SpaceFrog

heu si on te dit que ça n'existe pas ...
et si tu es si sur de ton fait, en viens plus nous poser tes questions ???

ça va les chevilles ?

On peut jamais discuter ici ? Ce que tu sais c'est toujours correct ?

@Bovino :

J'avais fait ça un moment et même que c'est toi qui m'avais aidé pour .
C'est pas un tableau associatif que j'avais fait là ?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
$leftItem.each(function(){
 
	var id = $(this).val();
	var label = $(this).text();				
	var item = { "id" : id, "label" : label };		
 
	//add item in itemCollection
	itemCollection.push(item);		
 
	var monID = itemCollection[itemCollection.length - 1].id;
	var monLabel = itemCollection[itemCollection.length - 1].label;

Et tu pourrais m'aider pour les deux questions en commentaires au-dessus s'il te plait ??

[Bovino]

C'est pas un tableau associatif que j'avais fait là ?

Non, c'était un tableau (objet Array) dont les membres sont des objets (objet Object)

Code :

alert(dateOS); // undefined... Quel est l'erreur dans "var dateOS" s'il vous plait ?

Si dateOS n'est pas déclaré comme tableau (var dateOS = [];) alors c'est normal :

Code :

1
2
3
4
5
6
7
var myTab;
myTab[0] = 'toto';
alert(myTab);  // TypeError: myTab is undefined
 
var myTab = [];
myTab[0] = 'toto';
alert(myTab); // => toto

Sinon, pour datePicker, je ne l'utilise pas, donc je ne saurais pas te donner de réponse.

[danielhagnoul]

Bonsoir

Je ne sais pas si j'ai bien compris la question, mais pour résumer la discussion voici un exemple de ce qu'il est possible de réaliser.

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<form>
			<label>Win : </label><input id="winCheck" type="checkbox"/> <label>Mac : </label><input id="macCheck" type="checkbox"/><br/>
			<label>Window :</label><input id="winText" type="text" disabled="disabled"/><br/>
			<label>Macintosh :</label><input id="macText" type="text" disabled="disabled"/><br/>
		</form>
		<button id="btnEtat">Etat du formulaire</button>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-28T22:40:00.000+02:00" pubdate>2011-05-28</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		$(function(){
			var objWin ={
				label: "Win",
				checked: false,
				texte: "",
				toString: function(){
					var result = this.label;
 
					if (this.checked){
						result += ' est sélectionné, son texte est : "' + this.texte + '".'
					} else {
						result += ' n\'est pas sélectionné.'
					}
 
					return result;
				}
			};
 
			var objMac = {
				label: "Mac",
				checked: false,
				texte: "",
				toString: function(){
					var result = this.label;
 
					if (this.checked){
						result += ' est sélectionné, son texte est : "' + this.texte + '".'
					} else {
						result += ' n\'est pas sélectionné.'
					}
 
					return result;
				}
			};
 
			$("#btnEtat").click(function(){
				console.log(objWin.toString() + "\n" + objMac.toString());
			});
 
			$("#winCheck").change(function(){
				var bool = $(this).prop("checked");
 
				if (bool){
					$("#winText").prop("disabled", false);
				} else {
					$("#winText").val("").prop("disabled", true);
				}
 
				objWin.checked = bool;
			});
 
			$("#macCheck").change(function(){
				var bool = $(this).prop("checked");
 
				if (bool){
					$("#macText").prop("disabled", false);
				} else {
					$("#macText").val("").prop("disabled", true);
				}
 
				objMac.checked = bool;
			});
 
			$("#winText").change(function(){
				objWin.texte = $(this).val();
			});
 
			$("#macText").change(function(){
				objMac.texte = $(this).val();
			});
		});
	</script>
</body>  
</html>