Changer couleur label

**designrf** · 18/02/2010, 12h46

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 :

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
 
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.whiteselection { color:#FFFFFF;}

Voici mon form:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**danielhagnoul** · 18/02/2010, 23h51

Bonsoir.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**designrf** · 19/02/2010, 10h59

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

**Macois** · 19/02/2010, 11h30

Bonjour,

Je pense qu'il manque ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**designrf** · 19/02/2010, 11h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
			});
	});  
});

**Macois** · 19/02/2010, 12h02

Voilà pour les couleurs :

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
 
<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 ?

**designrf** · 19/02/2010, 12h10

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

**Macois** · 19/02/2010, 14h32

As tu tenté quelque chose de ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

???

**Macois** · 19/02/2010, 14h55

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/

**designrf** · 19/02/2010, 16h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
	});

**Macois** · 19/02/2010, 16h38

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

**designrf** · 19/02/2010, 16h48

Non non voici tout mon code:

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

**Macois** · 19/02/2010, 16h50

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

Je vais regarder un peu !

**Macois** · 19/02/2010, 16h56

Voilà :

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
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");
             }
 });
});

(J'ai testé qu'avec deux labels

)

**designrf** · 19/02/2010, 16h57

Eu oui désolé j'ai inversé ce que je voulais dire

Changer couleur label

jQuery

Vue hybride

Discussions similaires

Partager

Partager