Changer couleur label

Version imprimable

Bonjour a tous,

j'ai créé un menu pour me permettre de faire une recherche en fonction des checkbox qui sont checked. Une seule checkbox est autoriser a etre cocher. Pour cela j'utilise un script qui me permet dans cocher une seule. Mon probleme est que je lorsque que l'on clique sur un label celui ci doit changer de couleur mais celui ci ne revient pas a ca couleur initiale lorsque que je clicque sur une autre checkbox.

Voici mon script jquery:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> $(document).ready(function(){ $(".menusong").click(function(){ $(this).toggleClass("whiteselection"); }); $('input:checkbox[name=BPM\\[\\]]').change(function(){ alert("test"); var $checkstyle = $('input.checkstyle'); $checkstyle.change(function() { $checkstyle.removeAttr('checked'); $(this).attr('checked', true); }); }); }); </script>
Voici mon css:
Code:

1 2 .whiteselection { color:#FFFFFF;}
Voici mon form:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <label for="1" class="menusong">V Slow (0-80)</label> <input name="BPM[]" type="checkbox" id="1" value="vslow" class="checkstyle" /> <label for="2" class="menusong">Slow (80-100)</label> <input name="BPM[]" type="checkbox" id="2" value="slow" class="checkstyle" /> <label for="3" class="menusong">Medium (100-120)</label> <input name="BPM[]" type="checkbox" id="3" value="medium" class="checkstyle" /> <label for="4" class="menusong">Fast (120-140)</label> <input name="BPM[]" type="checkbox" id="4" value="fast" class="checkstyle" /> <label for="5" class="menusong">V Fast (140 +)</label> <input name="BPM[]" type="checkbox" id="5" value="vfast" class="checkstyle" />
Sur l'image suivante on peut voir que les labels sont en blanc alors que juste une checkbox est cochée.

http://www.madebyanalogue.co.uk/share/screen3.png

Bonsoir.

Les deux class jouent avec color, dans ce cas il est préférable de faire :
Code:

1 2 3 4 5 6 7 8 9 $(".menusong").click(function(){ var obj = $(this); if (obj.hasClass("menusong")){ $(this).removeClass("menusong").addClass("whiteselection"); } else { $(this).removeClass("whiteselection").addClass("menusong"); } });
Avec toogleClass, c'est comme si l'on écrivait :

Code:

style="color:red;color:white;"

19/02/2010, 11h59
designrf

Bonjour,

merci pour la reponse. J'ai utilisé le code mais rien ne change helas.
Je souhaite juste que lorsque l'on clique sur le label celui ci devienne blanc (checkbox:checked) puis lorsque l'on clique sur un autre label, le precedent redevienne gris (checkbox:unchecked) et celui actif blanc.

J'espere etre plus clair.

Cordialement

Bonjour,

Je pense qu'il manque ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(".menusong").click(function(){
	var obj = $(this);
        $.each(".menusong", function() {
             if (obj.hasClass("menusong")){
                 $(this).removeClass("menusong");
	     } 
        });
        if (obj.hasClass("menusong")){
		$(obj).removeClass("menusong").addClass("whiteselection");
	     } else {
		$(obj).removeClass("whiteselection").addClass("menusong");
	}
});

Après je pense qu'on peut utiliser l'opérateur :not mais je ne l'ai jamais testé ;)

En espérant que ce code soit fonctionnel !

Merci pour la reponse.
Le code color bien mes label mais lorsque que je clique sur un autre label, le precedent ne se decolor pas.

J'ai essayé de mettre le code dans la fonction click du input pour que les 2 correspondent mais ca ne marche pas.
Code:

1 2 3 4 5 6 7 8 9 10 $('input:checkbox[name=BPM\\[\\]]').change(function(){ alert("test"); var $checkstyle = $('input.checkstyle'); $checkstyle.change(function() { $checkstyle.removeAttr('checked'); $(this).attr('checked', true); }); }); });

Voilà pour les couleurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("label.menusong").click(function(){
	      var obj = jQuery(this);
	      jQuery("label.whiteselection").each(function(){
          if (jQuery(this).hasClass("whiteselection")){
            jQuery(this).removeClass("whiteselection").addClass("menusong");
	        } 
        }); 
	      if (obj.hasClass("menusong")){
		      obj.removeClass("menusong").addClass("whiteselection");
	      } else {
		      obj.removeClass("whiteselection").addClass("menusong");
	      }
  });	  
});
</script>

Pour le reste du code, ça roule ?

19/02/2010, 13h10
designrf

Ah merci ca marche nikel!! Avec le reste du code aussi!

J'ai juste une question supplementaire. Lorsque j'ai juste une checkbox d'active et que je veux la desactiver en recliquant dessus ca ne marche pas, elle se reactive.

As-tu une solution?

Cordialement
19/02/2010, 15h32
Macois

As tu tenté quelque chose de ce style :

Code:

obj.next("input.checkstyle").removeAttr("checked");

???
19/02/2010, 15h55
Macois

Ces deux liens en parlent :

http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript

http://www.electrictoolbox.com/check...eckbox-jquery/

;)

Non j'avais pas utilisé ca. J'ai essayé ton code, mais ca me decolor plus les label :( mais ca me decoche bien la checkbox.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('input:checkbox[name=BPM\\[\\]]').change(function(){
			alert("test");
 
           var $checkstyle = $('input.checkstyle');
			$checkstyle.change(function() {
  			$checkstyle.removeAttr('checked');
   			$(this).attr('checked', true);
 
			});
 
	obj.next("input.checkstyle").removeAttr("checked");
	});

19/02/2010, 17h38
Macois

Si tu as que ça comme code JS, c'est normal.
Tu ne manipules plus du tout les classes css qui gèrent les couleurs du texte ;)

Non non voici tout mon code:

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
 
<script type="text/javascript">
$(document).ready(function(){
 
      $('input:checkbox[name=BPM\\[\\]]').change(function(){
			alert("test");
 
           var $checkstyle = $('input.checkstyle');
			$checkstyle.change(function() {
  			$checkstyle.removeAttr('checked');
   			$(this).attr('checked', true);
 
			});
 
			obj.next("input.checkstyle").removeAttr("checked");
	});
 
 	jQuery("label.menusong").click(function(){
             var obj = jQuery(this);
             jQuery("label.whiteselection").each(function(){
         if (jQuery(this).hasClass("whiteselection")){
           jQuery(this).removeClass("whiteselection").addClass("menusong");
               }
       });
             if (obj.hasClass("menusong")){
                     obj.removeClass("menusong").addClass("whiteselection");
             } else {
                     obj.removeClass("whiteselection").addClass("menusong");
             }
 });
 
 
 
});
</script>

19/02/2010, 17h50
Macois

Chez moi le changement de couleurs se fait bien, c'est les checkbox qui se cochent/décochent qui ne marchent pas !:mouarf:

Je vais regarder un peu !

Voilà :

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
jQuery(document).ready(function(){
 
      jQuery('input:checkbox[name=BPM\\[\\]]').change(function(){
           var checkstyle = jQuery('input.checkstyle');
			     checkstyle.change(function() {
  			       checkstyle.removeAttr('checked');
   			       jQuery(this).attr('checked', true);
			     });
			//obj.next("input.checkstyle").removeAttr("checked");
	   });
 
 	jQuery("label.menusong").click(function(){
             var obj = jQuery(this);
             jQuery("label.whiteselection").each(function(){
         if (jQuery(this).hasClass("whiteselection")){
           jQuery(this).removeClass("whiteselection").addClass("menusong");
               }
       });
             if (obj.hasClass("menusong")){
                     obj.removeClass("menusong").addClass("whiteselection");
             } else {
                     obj.removeClass("whiteselection").addClass("menusong");
             }
 });
});

:ccool:
(J'ai testé qu'avec deux labels ;))

19/02/2010, 17h57
designrf

Eu oui désolé j'ai inversé ce que je voulais dire :)
19/02/2010, 18h00
Macois

Le dernier bout de code que j'ai posté marche nickel ici ;) :ccool:
19/02/2010, 18h06
designrf

Arf, lorsque je clique sur un label, celui ci devient bien blanc et la checkbox active mais si je reclique dessus ca le deselectionne pas :(
19/02/2010, 18h11
Macois

Arf !

Je regarde ;)
19/02/2010, 18h35
Macois

Pour le cochage/décochage :

jQuery(this).change(function() {}); a l'air de bien marcher tout seul en fait :mrgreen: