Afficher une div lorsqu'une checkbox est cochée

Après avoir fureté sur les différents posts s'approchant de mon problème et sans avoir trouvé la solution, je vous expose mon cas.

J'ai un formulaire avec différentes chekboxs. J'ai des divs masquées associées à ces chekboxs, que je souhaite tout simplement rentre visible lorsque la checkbox qui lui correspond est cochée !

Mon problème est que je n'arrive pas à détecter lorsque c'est coché ou décoché. Une piste ? Un tuto ? Quelque chose qui puisse me mettre sur la voie ?

Merci d'avance.

Ceci devrait t'aider je pense

Code:

$('#checkboxid').is(':checked')

l'attribut ":checked" te permet de savoir si ta checkbox est cochée

Bonsoir.

Exemple :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
	</style>
	<!-- <script charset="CP-1252" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> -->
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script>
		$(function(){
 
			$("input[type=checkbox]").change(function(){
				if ($(this).is(":checked")){
					$(this).next("div").css("display","block");
				} else {
					$(this).next("div").css("display","none");
				}
			});
 
			/*
			 * Pour afficher la division qui doit être visible à l'ouverture de la page.
			 */
			$("input[type=checkbox]").change();
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<form>
			<input type="checkbox"/>
			<div style="display:none; width:100px; height:100px; border:1px solid red;">1</div>
			<input type="checkbox" checked="checked"/>
			<div style="display:none; width:100px; height:100px; border:1px solid red;">2</div>
			<input type="checkbox"/>
			<div style="display:none; width:100px; height:100px; border:1px solid red;">3</div>			
		</form>
	</div>
</body>  
</html>

Super, j'ai eu bcp de mal à lettre en place le code à partir de l'aide de pop_up, mais avec celle de danielhagnoul ça commence à fonctionner. Je vais voir si j'arrive à faire ce que je veux.

Merci