Bonjour,
Je suis en alternance dans une entreprise et je travail actuellement sur un projet, dans lequel je suis un peut bloqué car je suis vraiment débutant en JavaScript.
Je travail actuellement sur une liste déroulante composé de checkbox afin de faire une sélection multiple sans forcément passer par "Ctrl". Mon problème est que mon code actuel permettait de fonctionner sur une seule liste déroulante mais la je dois l'adapter pour qu'il fonctionne sur plusieurs.
J'ai donc fait quelques bidouilles, notamment différencier la deuxième liste déroulante avec un autre id etc... mais cela ne fonctionne pas, car lorsque je clique sur le bouton afficher de la première sa m'affiche les 2.
Je vous met ci-dessous mon code et vous remercie d'avance pour vos réponses
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
32
33
34
35
36
37
38
39
40
41
42
43 $(function(){ $(".things> input:checkbox").change(function(){ check(); }); $(".things").click(function(){ if($(this).children("input:checkbox").prop("checked")) { $(this).children("input:checkbox").prop("checked",false); } else { $(this).children("input:checkbox").prop("checked",true); } check(); }); var obj = document.getElementById("container1") alert(obj.nodeName.toLowerCase()); if (obj.nodeName.toLowerCase() == "container1"){ $("#container1").toggle(); }else{ $("#container").toggle(); } }); function check() { var str=""; $(".things > input:checkbox:checked").parent().each(function(){ str += $(this).text()+"; "; }); $("#result1").val(str); $("#result").val(str); } function display(ele) { $(ele).val((($(ele).val()=="Hide")?"Show":"Hide")); var obj1 = document.getElementById("container1") alert(obj1.nodeName.toLowerCase()); if (obj1.nodeName.toLowerCase() == "container1"){ $("#container1").toggle("blind"); }else{ $("#container").toggle("blind"); } }
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 <body> <input type="text" id="result1" size="30"><input type="button" onclick="display(this)" value="Show"> <div id="container1" > <div class="things"><input type="checkbox" value="">Nicolas Bernard1</div> <div class="things"><input type="checkbox" value="">Benjamin Miquel1</div> <div class="things"><input type="checkbox" value="">Mael Jarnole1</div> <div class="things"><input type="checkbox" value="">Thibault Collard1</div> <div class="things"><input type="checkbox" value="">Max Chevalier1</div> </div> <input type="text" id="result" size="30"><input type="button" onclick="display(this)" value="Show"> <div id="container" > <div class="things"><input type="checkbox" value="">Nicolas Bernard</div> <div class="things"><input type="checkbox" value="">Benjamin Miquel</div> <div class="things"><input type="checkbox" value="">Mael Jarnole</div> <div class="things"><input type="checkbox" value="">Thibault Collard</div> <div class="things"><input type="checkbox" value="">Max Chevalier</div> </div> </body>
Partager