JQuery: évènement sur checkbox

**sawati** · 18/09/2010, 18h40

Bonjour,

dans un label (avec un id généré par PHP) se trouve une checkbox,

comportement souhaité: quand je sélectionne la checkbox (directement ou sur le label) > le background du label change et quand je désélectionne > le background revient à la normale.

J'ai un peu honte de poster ça mais après de nombreux essais je reste toujours bloqué, j'utilisais la fonction toggle de jquery et onclick sur le label mais le comportement n'est jamais bon. j'ai essayé onfocus, onselect, onchange : à chaque fois un comportement bizard et différent

merci

**sawati** · 18/09/2010, 19h18

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script type="text/javascript" language="javascript">
 
	function toggle_bg(checkb, label){
	$(checkb).toggle(
		function(){ $(label).css('background', '#FF942B'); }, 
		function(){ $(label).css('background', '#33FF00');} 
		)
}
 
</script>
<style type="text/css" >
label{
background:#33FF00;
}
</style>
</head>
 
<body>
<form>
<label id="d" style=" display:block; width: 100px; height: 100px;">
<input type="checkbox" onclick="toggle_bg('#d input', '#d');" name="gogo"/>
</label>
 
</form>
</body>
</html>

**demanghonj** · 19/09/2010, 18h06

La solution porte sur l'évenement onchange.

Tu initialises le javascript comme ceci:

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
 
//Au chargement de la page
$(document).ready(function(){
        //on récupère le label
	var label = $("#d");
        //sur le onchange de la checkbox
	$("[name=gogo]").change(function(){
                //si la case a cocher est cochée
		if(this.checked){
			$(label).css('background', '#FF942B');
		}else{
			$(label).css('background', '#33FF00');
		} 
	});
});

N'oublie pas d'enlever le onclick sur la checkbox

Code :

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

1
2
 
<input type="checkbox" name="gogo"/>

voila.

**sawati** · 19/09/2010, 19h43

Merci beaucoup, mais hélas ça ne fonctionne pas

Deplus dans mon cas réel, il y a plusieurs centaines de checkboxes avec chacune une id générée par php, donc je ne crois pas que la méthode de récupération d'id que tu me proposes soit adaptée

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
//Au chargement de la page
$(document).ready(function(){
        //on récupère le label
	var label = $("#d");
        //sur le onchange de la checkbox
	$("[name=gogo]").change(function(){
                //si la case a cocher est cochée
		if(this.checked){
			$(label).css('background', '#FF942B');
		}else{
			$(label).css('background', '#33FF00');
		} 
	});
});
</script>
<style type="text/css" >
label{
background:#33FF00;
}
</style>
</head>
 
<body>
<form>
<label id="d" style=" display:block; width: 100px; height: 100px;">
<input type="checkbox" name="gogo"/>
</label>
 
</form>
 
</body>
</html>

**sawati** · 19/09/2010, 21h04

Bon, j'ai bidouillé un peu ton code et ça fonctionne bien
Merci pour ton aide

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
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.cookie.js"></script>
<script language="javascript" type="text/javascript">
	function toggle_bg(id){
        //on récupère le label
		var label = $("#"+id+"_label");
		//sur le onchange de la checkbox
		$("#"+id).change(
			function(){
						//si la case a cocher est cochée
				if(this.checked){
					$(label).css('background', '#FF942B');
				}else{
					$(label).css('background', '#33FF00');
				} 
			}
		);
	}
</script>
<style type="text/css" >
label{
background:#33FF00;
}
</style>
</head>
 
<body>
<form>
<table>
<tr>
<td onclick="toggle_bg('23-06')">
<label id="23-06_label" style=" display:block; width: 100px; height: 100px;" >
<input type="checkbox" name="gogo[]" id="23-06" />
</label>
</td>
<td onclick="toggle_bg('24-06')">
<label id="24-06_label" style=" display:block; width: 100px; height: 100px;" >
<input type="checkbox" name="gogo[]" id="24-06" />
</label>
</td>
</tr>
</table>
 
</form>
 
</body>
</html>

JQuery: évènement sur checkbox

jQuery

Discussions similaires

Partager

Partager