Afficher une div lorsqu'une checkbox est cochée

**nicolas2603** · 04/02/2010, 09h11

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.

**pop_up** · 04/02/2010, 13h03

Ceci devrait t'aider je pense

Code :

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

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

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

**danielhagnoul** · 04/02/2010, 22h04

Bonsoir.

Exemple :

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

**nicolas2603** · 05/02/2010, 17h15

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

Afficher une div lorsqu'une checkbox est cochée

jQuery

Discussions similaires

Partager

Partager