Récupérer et afficher le "text" d'une checkbox dans un "input text"

**Nico1131** · 12/11/2013, 15h31

Bonjour,

Ce que j'aimerai c'est une autre façon de faire (simplifié ou non) pour récupérer le text des checkbox et de les afficher dans l'input pour que ce soit compatible avec IE 8 (hé oui je travail sous IE 8, faut bien si on veux que ce soit multi-platforme

).

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
//Quand la page est chargée
$(function(){
	//On cache les éléments dès le début
	$(".containerElCombo").hide();
	/*
	1 - je cherche tout les containerCombo
	2 - Si il est caché je l'affiche et cache les autres
	3 - Sinon je le cache et les autres aussi
	*/
	$("input[type=button]").on('click', function(){
		$('.containerElCombo').not($(this).next()).hide(); 
		$(this).next().toggle();
	});
	//dès que quelqu'un clique sur une checkbox
	$(".elementCombo > input:checkbox").change(function(){
		//On récupère ceux qui sont déjà checker
		str = check($(this).parent().parent());
		//On met le résultat dans l'input avec la classe "resultat"
		$(this).parent().parent().parent().children(".resultat").val(str);
		return false;
	});
});
//Récupere tout les checkbox qui sont checker et créer un string avec //toutes les valeurs
function check(ele)
{
	var str="";
	$(ele).children(".elementCombo").children("input:checkbox:checked").parent().each(function(){
		str += $(this).text()+"; ";
	});
	return str;
}

Code html :

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
 
<!DOCTYPE html>
<html>
<head>
   <meta charset=utf-8>
   <title>Ici il faut mettre un titre</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style>
 
.elementCombo
        {
                background-color: white;
                width: 200px;
                list-style-type:none;   
        }
        
.containerElCombo
        {
                overflow: auto; 
                position: absolute;     
                height:150px;
                margin-top : 24px;
        }
 
</style>
 
</head>
<body>
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
<ul class="containerElCombo">
   <li class="elementCombo">
      <input type="checkbox"><label for="checkbox">Lundi</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">Mardi</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">Mercredi</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">Jeudi</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">Vendredi</label>
   </li>
   <li class="elementCombo">
      <input type="checkbox"><label for="checkbox">Samedi</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">Dimanche</label>
   </li>
</ul>
</div>
 
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
 
<ul class="containerElCombo">
   <li class="elementCombo">
      <input type="checkbox"><label for="checkbox">01</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">02</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">03</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">04</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">05</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">06</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">07</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">08</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">09</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">10</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">11</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">12</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">13</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">14</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">15</label>
   </li>
   <li class="elementCombo">
	  <input type="checkbox"><label for="checkbox">16</label>
   </li>
 
</ul>
</div>
</body>
</html>

**SpaceFrog** · 12/11/2013, 15h34

le text des checkbox

??? un checkbox n'a pas de text ...

tu parles du label ??

**Nico1131** · 12/11/2013, 16h06

Oui x) désoler j'ai mal formulé ma phrase ^^
C'est celui du label que je souhaite récupérer effectivement

**SpaceFrog** · 12/11/2013, 16h20

avec

Code :

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

$(this).next('label').text()

**Nico1131** · 12/11/2013, 16h28

Envoyé par SpaceFrog

avec

Code :

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

$(this).next('label').text()

J'ai essayé mais sa marche pas, sa ne coche plus du tout sous IE8 et sur les autres navigateurs sa n'affiche plus les labels dans l'input.

**Bovino** · 12/11/2013, 16h31

Tout d'abord, tu serais avisé de te renseigner sur l'utilité de l'attribut for pour un <label>.

Sinon, ta démarche ne me semble pas la plus efficace. Tu ferais mieux de mettre le texte souhaité comme attribut du checkbox, ce sera plus facile et plus sûr pour récupérer sa valeur.
Pour ça, le plus naturel serait d'utiliser l'attribut value, mais si pour une raison quelconque tu ne souhaites pas que le value corresponde au texte du label, tu peux utiliser un attribut personnalisé data-* (par exemple data-texte).

**SpaceFrog** · 12/11/2013, 16h51

Un peu tordu ...

http://jsfiddle.net/dAWZ2/1/

sinon comme le dit Beef for => id du checkbox

et les checkboxes ont une value que tu pourrais utiliser au lie de passer par le texte du label

Code html :

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

 <input type="checkbox" id="chkjeudi" value="jeudi"><label for="chkjeudi" >Jeudi</label>

**Nico1131** · 12/11/2013, 16h58

Pour le value non je ne veux pas l'utiliser pour ça car ce code n'est qu'un code de test. Car dans mon code principal la liste est alimentée par une requête dont le value prend (par exemple) l'id de la valeur qui est affiché dans le label.

**Bovino** · 12/11/2013, 17h02

mais si pour une raison quelconque tu ne souhaites pas que le value corresponde au texte du label, tu peux utiliser un attribut personnalisé data-* (par exemple data-texte).

**Nico1131** · 12/11/2013, 17h04

Oui j'ai vu

Mais je disais ça par rapport à ce qu'a dit SpaceFrog.

**Nico1131** · 12/11/2013, 17h12

Envoyé par SpaceFrog

Un peu tordu ...

http://jsfiddle.net/dAWZ2/1/

J'ai essayé, sa marche...mais à moitié. Quand je coche par exemple "Lundi" et "Mardi" on est obligé de cliquer à nouveau sur le bouton pour que ce soit affiché dans l'input.

http://jsfiddle.net/dAWZ2/6/

Mais c'est un bon début merci

**SpaceFrog** · 13/11/2013, 08h29

on est obligé de cliquer à nouveau sur le bouton pour que ce soit affiché dans l'input.

En général quand il y a un bouton afficher ... c'est pour qu'en cliquant dessus il affiche ...
Maintenant si tu cherches une autre ergonomie, encore faudrait-il que tu nous l'exposes... j'ai beau relire ton post je ne vois nulle part une explication claire de ce que tu cherches à faire, hormis récupérer le contenu des lablels...

**Nico1131** · 13/11/2013, 09h08

Ben pourtant il me semblait que j'étais claire dans mes propos. Ce que je voudrai c'est exactement le même fonctionnement de mon code de base que j'ai donné mais compatible sous IE8.
Quand tu test mon code tu voit bien quand cochant sur les cases sa s'affiche directement dans l'input sans passer par un clique bouton. Le bouton ne sert qu'à afficher et cacher la liste c'est tout.

**SpaceFrog** · 13/11/2013, 09h27

Quand tu test mon code tu voit bien quand cochant sur les cases sa s'affiche

Tu crois que je recopie tous les codes qui trainent ici pour les tester ?
Pour ce qui est de la clarté, je ne vois nulle part dans ta demande exprimé clairement la mise à jour de l'input lors de l'évenement click des checkboxes ...

Une fois que l'on sait sur quel évènement travailler il n'y a rien de bien compliqué à actualiser un input sur un click de checkbox
http://jsfiddle.net/dAWZ2/10/

**Nico1131** · 13/11/2013, 09h35

Envoyé par SpaceFrog

Tu crois que je recopie tous les codes qui trainent ici pour les tester ?

En même temps je laisse pas le code pour faire jolie et je suis pas sensé savoir que tu ne veux pas prendre la peine de l'essayer, donc c'est normal que tu puisse pas comprendre clairement le problème.

**Nico1131** · 13/11/2013, 09h38

Envoyé par SpaceFrog

Une fois que l'on sait sur quel évènement travailler il n'y a rien de bien compliqué à actualiser un input sur un click de checkbox
http://jsfiddle.net/dAWZ2/10/

C'est peut être le cas pour toi, moi je ne suis que débutant mais j'aurai du le préciser sa aussi :/

Merci quand même de ta réponse.

**SpaceFrog** · 13/11/2013, 09h40

http://club.developpez.com/regles/
chapitre 3.3 ...

Que souhaitez-vous faire au juste ? Si votre question n'est pas suffisamment précise, personne ne pourra vous aider.

Estime toi heureux que je me sois penché sur ton post ...
En général les questions vagues ne trouvent pas de réponses.

C'est si pénible de préciser :
"Lors d'un click sur les checkboxes je souhaite faire une mise à jour du contenu de l'input texte le précédant avec le contenu des labels juste après"

Simple clair concis ...

Bonne continuation

**Nico1131** · 13/11/2013, 09h54

Ma question était de trouver le moyen de faire marcher mon code sous IE8.

Il me semblait qu'en laissant mon code tu aurait pu voir comment il fonctionne clairement et constater qu'effectivement que lors d'un click sur les checkboxes la mise à jour du contenu de l'input texte le précédant par rapport au contenu des labels juste après.

Mais la prochaine fois je le mettrai directement sur un éditeur en ligne au moins sa évitera ce genre de justification.

Fin bon je vais faire mes modifications et voir si tout fonctionne

**SpaceFrog** · 13/11/2013, 09h58

Mais la prochaine fois je le mettrai directement sur un éditeur en ligne au moins sa évitera ce genre de justification.

Cela pourra en effet aider ...

Pense néanmoins la prochaine fois à énoncer clairement ton besoin.
Je dis juste cela pour que tu puisses trouver des réponses ...