UI Mobile. Comment puis-je cocher ou décocher tous les "checkbox"

franklin19 · 11/07/2011, 16h18

bonjour!
je voudrais savoir comment fait on pour cocher tous les check box en cliquant sur un ou les decocher.
je parvient à les cocher un à un.
merci

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
 
 <div data-role="content">
								<form action="#" method="get"> 
								 <div data-role="controlgroup">
									   <legend>recherche par categorie</legend>
 
									   <input type="checkbox" name="categories" id="categories" class="custom" />
									   <label for="categories">selectionner Tout/ Deselectionner Tout</label>
 
									   <input type="checkbox" name="categories" id="restaurant" class="custom" />
									   <label for="restaurant"></label>
									   <input type="checkbox" name="categories" id="detente" class="custom" />
									   <label for="detente">Detente/soin</label>
									   <input type="checkbox" name="categories" id="loisirs" class="custom" />
									   <label for="loisirs">Loisirs </label>				
										<input type="checkbox" name="categories" id="achats" class="custom" />
									   <label for="achats">Achats</label>	
										<input type="checkbox" name="categories" id="voyages" class="custom" />
									   <label for="voyages">Voyages </label>	
									   <input type="checkbox" name="categories" id="services" class="custom" />
									   <label for="services">Services </label>	
									   <input type="submit" value="Ok" onclick="valider()" />
 
                               <div	
							   <div data-role="content">
							   <p><a href="#toutlesdeals" data-role="button" data-rel="dialog" data-transition="slideup" >choisir deal </a></p>  
							    </div>
					   </div>

SpaceFrog · 11/07/2011, 16h24

un petit effort pour aller voir dans la FAQ ?

Finality · 11/07/2011, 17h55

ou sur le forum

danielhagnoul · 11/07/2011, 23h43

Citation:

Envoyé par SpaceFrog

un petit effort pour aller voir dans la FAQ ?

Citation:

Envoyé par Finality

ou sur le forum

Il s'agit de jQuery Mobile, ce truc a failli avoir raison de moi

Je n'ai pas trouver un code plus simple, sans prendre un risque.

Pour :

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
<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
	   <legend>recherche par categorie</legend>
 
	   <input type="checkbox" name="categories" id="categories" class="custom" />
	   <label for="categories">selectionner Tout/ Deselectionner Tout</label>
 
	   <input type="checkbox" name="categories" id="restaurant" class="custom" />
	   <label for="restaurant">Restaurant</label>
 
	   <input type="checkbox" name="categories" id="detente" class="custom" />
	   <label for="detente">Detente/soin</label>
 
	   <input type="checkbox" name="categories" id="loisirs" class="custom" />
	   <label for="loisirs">Loisirs </label>
 
	   <input type="checkbox" name="categories" id="achats" class="custom" />
	   <label for="achats">Achats</label>
 
	   <input type="checkbox" name="categories" id="voyages" class="custom" />
	   <label for="voyages">Voyages </label>
 
	   <input type="checkbox" name="categories" id="services" class="custom" />
	   <label for="services">Services </label>
   </fieldset>
</div>

On doit utiliser un "fieldset", voir : http://jquerymobile.com/demos/1.0b1/...heckboxes.html

J'ai dû utiliser :

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
$("#categories").change(function(){
	var objParent = $(this).parents("fieldset"),
		objsInput = objParent.find("input[type='checkbox']"),
		objsLabel = objParent.find("label[for]"),
		boolChecked = $(this).prop("checked");
 
	objsInput.prop("checked", boolChecked);
 
	if (boolChecked){
		objsLabel.removeClass("ui-checkbox-off").addClass("ui-checkbox-on");
 
		$.each(objsLabel.children(), function(i, item){
			$(item).children().each(function(j, jtem){
				if (j == 1){
					$(jtem).removeClass("ui-icon-checkbox-off").addClass("ui-icon-checkbox-on");
				}
			});
		});
	} else {
		objsLabel.removeClass("ui-checkbox-on").addClass("ui-checkbox-off");
 
		$.each(objsLabel.children(), function(i, item){
			$(item).children().each(function(j, jtem){
				if (j == 1){
					$(jtem).removeClass("ui-icon-checkbox-on").addClass("ui-icon-checkbox-off");
				}
			});
		});
	}
});

Car UI Mobile transforme le code HTML en un complexe :

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
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
			   <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div role="heading" class="ui-controlgroup-label">recherche par categorie</div><div class="ui-controlgroup-controls">
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="categories" class="custom"><label for="categories" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-top"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">selectionner Tout/ Deselectionner Tout</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="restaurant" class="custom"><label for="restaurant" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off"><span class="ui-btn-inner"><span class="ui-btn-text">Restaurant</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="detente" class="custom"><label for="detente" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off"><span class="ui-btn-inner"><span class="ui-btn-text">Detente/soin</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="loisirs" class="custom"><label for="loisirs" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off"><span class="ui-btn-inner"><span class="ui-btn-text">Loisirs </span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="achats" class="custom"><label for="achats" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off"><span class="ui-btn-inner"><span class="ui-btn-text">Achats</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="voyages" class="custom"><label for="voyages" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off"><span class="ui-btn-inner"><span class="ui-btn-text">Voyages </span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
 
				   <div class="ui-checkbox"><input type="checkbox" name="categories" id="services" class="custom"><label for="services" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Services </span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"></span></span></label></div>
 
			   </div></fieldset>
			</div>

Et l'on dépend des "label" et des "span" pour cocher ou décocher !

franklin19 · 18/07/2011, 11h40

Citation:

Envoyé par Finality

ou sur le forum

j'ai essayé votre code qui ne marche pas chez moi, je ne le comprends pas très bien

Finality · 18/07/2011, 15h09

Citation:

Envoyé par franklin19

j'ai essayé votre code qui ne marche pas chez moi, je ne le comprends pas très bien

Essayez le code de danielhagnoul donné juste au dessus de votre dernier message

franklin19 · 18/07/2011, 17h03

j ai essayé ce code sans succès

danielhagnoul · 18/07/2011, 20h07

Bonsoir

C'est jQuery UI Mobile qui se sert des classes affectées à un "label" et à deux "span" pour chaque input de type "checbox" pour manipuler la coche qui rend la manipulation complexe.

J'espère que dans la version 1.0.0, l'API jQuery Mobile contiendra une commande simple pour effectuer la même action, dans la version b1 je n'ai rien vu.

Il m'est impossible de vous expliquer la chose simplement.

Chez moi cela fonctionne, voilà le code complet de ma page de test :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 
    <div data-role="page">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">	
            <h2>Page 1</h2>
 
			<div data-role="fieldcontain">
			   <fieldset data-role="controlgroup">
				   <legend>recherche par categorie</legend>
 
				   <input type="checkbox" name="categories" id="categories" class="custom" />
				   <label for="categories">selectionner Tout/ Deselectionner Tout</label>
 
				   <input type="checkbox" name="categories" id="restaurant" class="custom" />
				   <label for="restaurant">Restaurant</label>
 
				   <input type="checkbox" name="categories" id="detente" class="custom" />
				   <label for="detente">Detente/soin</label>
 
				   <input type="checkbox" name="categories" id="loisirs" class="custom" />
				   <label for="loisirs">Loisirs </label>
 
				   <input type="checkbox" name="categories" id="achats" class="custom" />
				   <label for="achats">Achats</label>
 
				   <input type="checkbox" name="categories" id="voyages" class="custom" />
				   <label for="voyages">Voyages </label>
 
				   <input type="checkbox" name="categories" id="services" class="custom" />
				   <label for="services">Services </label>
			   </fieldset>
			</div>
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <script>
        $(window).load(function(){
 
			/*
			 * Cocher ou décocher tous les checkbox
			 * contenu dans le fieldset.
			 */
			$("#categories").change(function(){
				var objParent = $(this).parents("fieldset"),
					objsInput = objParent.find("input[type='checkbox']"),
					objsLabel = objParent.find("label[for]"),
					boolChecked = $(this).prop("checked");
 
				objsInput.prop("checked", boolChecked);
 
				if (boolChecked){
					objsLabel.removeClass("ui-checkbox-off").addClass("ui-checkbox-on");
 
					$.each(objsLabel.children(), function(i, item){
						$(item).children().each(function(j, jtem){
							if (j == 1){
								$(jtem).removeClass("ui-icon-checkbox-off").addClass("ui-icon-checkbox-on");
							}
						});
					});
				} else {
					objsLabel.removeClass("ui-checkbox-on").addClass("ui-checkbox-off");
 
					$.each(objsLabel.children(), function(i, item){
						$(item).children().each(function(j, jtem){
							if (j == 1){
								$(jtem).removeClass("ui-icon-checkbox-on").addClass("ui-icon-checkbox-off");
							}
						});
					});
				}
			});
 
        });
    </script>
</body>
</html>

11/07/2011, 16h24	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	un petit effort pour aller voir dans la FAQ ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

11/07/2011, 17h55	#3
Finality Membre éclairé Webmaster Inscription : septembre 2007 Messages : 376 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Webmaster Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2007 Messages : 376 Points : 377 Points : 377	ou sur le forum
	00

18/07/2011, 17h03	#7
franklin19 Invité de passage Étudiant Inscription : juin 2011 Messages : 23 Détails du profil Informations personnelles : Sexe : Localisation : France, Seine et Marne (Île de France) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2011 Messages : 23 Points : 0 Points : 0	sans succes j ai essayé ce code sans succès
	00

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