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>

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager