fonction find débutant [Résolu]

xavioche77 · 17/05/2011, 17h53

Bonjour,

Je voudrais faire une chose qui parait simple en jquery mais je ne comprend pas tout. Je viens d'apprendre ce langage sur le tas. Je voudrais bien un petit coup demain.
J'ai un système de checkbox père fils. Quand on clique sur le père , tous les fils apparaissent cochés. En fait, je veux séparer les deux taches. Avec une checkbox qui fait apparaitre tous les fils. Et une autre qui quand on clique dessus, cochent tous les fils.

Donc je rajoute une checkbox appelé ici coche_tout_fils.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
while ($row1 = mysql_fetch_object($query_test)) {      
 
        ?>
 
                <li>
                                <input type="checkbox" class="checkbox" name="coche_tout_fils"
 
                                <input type="checkbox" class="checkbox coche" name="menu[]" value="<?php echo $row1->id_            ect ect...  // MENU PERE
 
 
<input type="checkbox" class="checkbox coche" name="menu[]" value="<?php echo $row2->id_eap;?>"   // ect ect MENU FILS

Code jquery d'origine qui quand on clique sur le père, tous les fils apparaissent et apparaissent cochés.

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
 
                 <script type="text/javascript">
                        $(function (){
                          $('ul#menu_selection li ul').addClass('hide');
 
                          $('ul#menu_selection > li input[type="checkbox"]').click(function () {
                                 $(this).parent().find('ul').toggleClass('hide');
 
 
                        $(this).siblings('ul').find('input:checkbox').each(function (i, item) {
                                        $(item)[0].checked = !$(item)[0].checked;
                                                });
 
 
 
                          });
                        });
 
 
                 </script>

Je voudrai que les checkboxs apparaissent coché seulement si on coche la case coche_tout_fils.
Comment dois je adapter le jquery pour que cela fonctionne. J'ai essayé $(this).siblings('ul').find('PLEIN DE CHOSES').each(function (i, item) {
Il faudrait que je trouve dans le find("PLEIN DE CHOSES") >> un moyen de lui dire " fonctionne que pour la checkbox coche_tout_fils". J'ai essayé bcp de choses sans succès

Merci d avance

danielhagnoul · 17/05/2011, 23h53

Bonsoir

Je ne suis pas certain d'avoir bien compris vu l'absence de code HTML et CSS (le code PHP n'est d'aucune utilité dans un sous forum JavaScript), mais voici un 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		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; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
		*/
 
		/* -- */
		.hide {display: none; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<ul id="menu_selection">
	<li>
		<input type="checkbox" name="montre_tout_fils"/><label> : Montre les fils</label>
	</li>
	<li>
		<input type="checkbox" name="coche_tout_fils_1"/><label> : Coche les fils 10</label>
		<ul>
			<li>
				<input type="checkbox"/><label> : Coche fils 11</label><br/>
				<input type="checkbox"/><label> : Coche fils 12</label>
			</li>
		</ul>
	</li>
	<li>
		<input type="checkbox" name="coche_tout_fils_2"/><label> : Coche les fils 20</label>
		<ul>
			<li>
				<input type="checkbox"/><label> : Coche fils 21</label><br/>
				<input type="checkbox"/><label> : Coche fils 22</label>
			</li>
		</ul>
	</li>
</ul>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-17T23:55:00.000+02:00" pubdate>2011-05-17</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script>
		$(function(){
			// réinitialiser au chargement de la page
			// prop() : http://api.jquery.com/prop/
			$("input:checkbox").prop("checked", false);
 
			$("#menu_selection > li > ul").addClass('hide');
 
			$("input:checkbox[name='montre_tout_fils']").click(function(){
				$("#menu_selection > li > ul").toggleClass('hide');
			});
 
			// version 1, comme votre code
			/*
			$("input:checkbox[name^='coche_tout_fils_']").click(function(){
				$(this).parent().children("ul").children("li").children("input:checkbox").each(function (i, item) {
					item.checked = !item.checked;
				});
			});
			*/
 
			/*
			 * Version 2
			 * On doit stocker la valeur du checkox père avant d'attribuer
			 * une valeur aux checkox contenu dans le parent, ce qui inclus
			 * le checkox père.
			 *
			 * name^= : http://api.jquery.com/?ns0=1&s=attribut&go=
			 */
			$("input:checkbox[name^='coche_tout_fils_']").click(function(){
				var bool = this.checked;
 
				$(this).parent().find("input:checkbox").prop("checked", bool);
			});
		});
	</script>
</body>  
</html>

xavioche77 · 18/05/2011, 10h12

Bonjour et merci,

C'est presque ça. Mais là, je reviens au même point. En fait, je veux que la case " Montre les fils" se retrouve à coté de la case " coche les fils 10" et qu'elle ne montre du coup QUE les fils de "coche les fils 10".

En fait, je veux que pour chaque checkbox "coche les fils 10 " et "20", il y ait une autre checkbox pour découvrir les fils " montre les fils" mais seulement de la case en question. J'arrive pas à faire cela, je n'arrive qu'à découvrir toutes les cases en même temps. Je ne sais pas si je suis très clair.

En gros: "coches les fils 10" "montre les fils 10"
"coche les fils 20" montre les fils 20"

Et comme ils sont crées par la base de données , il y en a pas mal.

Je vous remercie de votre aide

Bovino · 18/05/2011, 11h08

Dans un premier temps, il faudrait revoir ton code HTML/PHP car dans ce que tu nous montre, il manque beaucoup de fermetures de balises, ce qui est particulièrement problématique.
D'autre part, ta notion de père / fils ne semble pas exister dans ton balisage

xavioche77 · 18/05/2011, 11h21

oui oui je n'ai pas tout mis car le code est long , du coup, je fais mes tests maintenant sur le code de daniel. Dès que j'arrive à faire ce que je veux sur le code de daniel, je l'adapterais sur le mien.

Je n'arrive toujours pas à découvrir seulement les fils de la case en question

danielhagnoul · 18/05/2011, 22h15

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
82
83
84
85
86
87
88
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		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; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
		*/
 
		/* -- */
		.hide {display: none; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<ul id="menu_selection">
	<li>
		<input type="checkbox" name="montre_tout_fils_1"/><label> : Montre les fils</label>
		<input type="checkbox" name="coche_tout_fils_1"/><label> : Coche les fils 10</label>
		<ul>
			<li>
				<input type="checkbox"/><label> : Coche fils 11</label><br/>
				<input type="checkbox"/><label> : Coche fils 12</label>
			</li>
		</ul>
	</li>
	<li>
		<input type="checkbox" name="montre_tout_fils_2"/><label> : Montre les fils</label>
		<input type="checkbox" name="coche_tout_fils_2"/><label> : Coche les fils 20</label>
		<ul>
			<li>
				<input type="checkbox"/><label> : Coche fils 21</label><br/>
				<input type="checkbox"/><label> : Coche fils 22</label>
			</li>
		</ul>
	</li>
</ul>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-19T22:15:00.000+02:00" pubdate>2011-05-18</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script>
		$(function(){
			// réinitialiser au chargement de la page
			// prop() : http://api.jquery.com/prop/
			$("input:checkbox").prop("checked", false);
 
			$("#menu_selection > li > ul").addClass('hide');
 
			$("input:checkbox[name^='montre_tout_fils_']").click(function(){
				$(this).parent().children("ul").toggleClass('hide');
			});
 
			$("input:checkbox[name^='coche_tout_fils_']").click(function(){
				var bool = this.checked;
 
				$(this).parent().find("input:checkbox").prop("checked", bool);
			});
		});
	</script>
</body>  
</html>

xavioche77 · 19/05/2011, 09h54

Bonjour et merci de se pencher sur mon problème.
Dans votre exemple, les cases " coche les fils 10" et "coche les fils 20" fonctionne elles deplient les menus fils et les cochent. Par contre la case "montrer les fils" a coté de " coche le fils 10" devrait déplier que les fils "10" et la case "montre les fils" à coté de la case " coche les fils 20" devrait déplier que les fils 20. Les deux cases n'ont ici aucun effet .
Je vais chercher pour voir si je peux trouver ce qui cloche

[Edit] Je n'ai rien dit c'est mon code qui rentrait en conflit avec de bout d'exemple.

xavioche77 · 19/05/2011, 10h44

héhé youpi
J'ai réussi à l'adapter à mon code

Je vous remercie pour votre aide et votre réactivité. Le jquery c'est puissant, je vais me mettre à l'étudier plus sérieusement.

Merci

18/05/2011, 11h08	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 803 Points : 35 803	Dans un premier temps, il faudrait revoir ton code HTML/PHP car dans ce que tu nous montre, il manque beaucoup de fermetures de balises, ce qui est particulièrement problématique. D'autre part, ta notion de père / fils ne semble pas exister dans ton balisage __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

18/05/2011, 10h12	#3
xavioche77 Futur Membre du Club Inscription : avril 2010 Messages : 105 Détails du profil Informations forums : Inscription : avril 2010 Messages : 105 Points : 18 Points : 18	Bonjour et merci, C'est presque ça. Mais là, je reviens au même point. En fait, je veux que la case " Montre les fils" se retrouve à coté de la case " coche les fils 10" et qu'elle ne montre du coup QUE les fils de "coche les fils 10". En fait, je veux que pour chaque checkbox "coche les fils 10 " et "20", il y ait une autre checkbox pour découvrir les fils " montre les fils" mais seulement de la case en question. J'arrive pas à faire cela, je n'arrive qu'à découvrir toutes les cases en même temps. Je ne sais pas si je suis très clair. En gros: "coches les fils 10" "montre les fils 10" "coche les fils 20" montre les fils 20" Et comme ils sont crées par la base de données , il y en a pas mal. Je vous remercie de votre aide
	00

18/05/2011, 11h21	#5
xavioche77 Futur Membre du Club Inscription : avril 2010 Messages : 105 Détails du profil Informations forums : Inscription : avril 2010 Messages : 105 Points : 18 Points : 18	oui oui je n'ai pas tout mis car le code est long , du coup, je fais mes tests maintenant sur le code de daniel. Dès que j'arrive à faire ce que je veux sur le code de daniel, je l'adapterais sur le mien. Je n'arrive toujours pas à découvrir seulement les fils de la case en question
	00

19/05/2011, 09h54	#7
xavioche77 Futur Membre du Club Inscription : avril 2010 Messages : 105 Détails du profil Informations forums : Inscription : avril 2010 Messages : 105 Points : 18 Points : 18	Bonjour et merci de se pencher sur mon problème. Dans votre exemple, les cases " coche les fils 10" et "coche les fils 20" fonctionne elles deplient les menus fils et les cochent. Par contre la case "montrer les fils" a coté de " coche le fils 10" devrait déplier que les fils "10" et la case "montre les fils" à coté de la case " coche les fils 20" devrait déplier que les fils 20. Les deux cases n'ont ici aucun effet . Je vais chercher pour voir si je peux trouver ce qui cloche [Edit] Je n'ai rien dit c'est mon code qui rentrait en conflit avec de bout d'exemple.
	00

19/05/2011, 10h44	#8
xavioche77 Futur Membre du Club Inscription : avril 2010 Messages : 105 Détails du profil Informations forums : Inscription : avril 2010 Messages : 105 Points : 18 Points : 18	héhé youpi J'ai réussi à l'adapter à mon code Je vous remercie pour votre aide et votre réactivité. Le jquery c'est puissant, je vais me mettre à l'étudier plus sérieusement. Merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email