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

Version imprimable

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:

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>

11/07/2011, 16h24
SpaceFrog

un petit effort pour aller voir dans la FAQ ?
11/07/2011, 17h55
Finality

ou sur le forum :zoubi:

Citation:

Envoyé par SpaceFrog

un petit effort pour aller voir dans la FAQ ?

Citation:

Envoyé par Finality

ou sur le forum :zoubi:

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

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

Pour :

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

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:

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

18/07/2011, 11h40
franklin19

Citation:

Envoyé par Finality

ou sur le forum :zoubi:

j'ai essayé votre code qui ne marche pas chez moi, je ne le comprends pas très bien
18/07/2011, 15h09
Finality

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 ;)
18/07/2011, 17h03
franklin19

sans succes

j ai essayé ce code sans succès

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:

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>