Discussion :

[franklin19]

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]

un petit effort pour aller voir dans la FAQ ?

[Finality]

ou sur le forum

[danielhagnoul]

un petit effort pour aller voir dans la FAQ ?

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]

ou sur le forum

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

[Finality]

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]

j ai essayé ce code sans succès