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>