Récupérer et afficher le "text" d'une checkbox dans un "input text"
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:
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:
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> |
