JQuery: évènement sur checkbox

Version imprimable

18/09/2010, 17h40
sawati

JQuery: évènement sur checkbox

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

:help:

merci

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

La solution porte sur l'évenement onchange.

Tu initialises le javascript comme ceci:

Code:

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:

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

voila.

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:

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>

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

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