Cocher une seule checkbox dans un tableau html [Résolu]

arthuro45 · 01/06/2011, 15h16

Bonjour,

Comment faire pour que le code ci-dessous décoche les checkbox qui ne remplissent pas la condition, sans décocher celle qui la remplit ?

Pour le moment le code ne fait que cocher la bonne checkbox sans décocher les autres.

Code :

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

1
2
3
4
5
6
7
8
9
$(".modifier").click(function(){
  $("input:checkbox[name='check[]']").each(function(){
 
      if($(this).val() == donnee[9]){
          $(this).attr('checked', 'checked');
      }
 
  });
});

Bovino · 01/06/2011, 16h27

Un truc du style

Code :

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

1
2
3
4
5
6
7
8
9
$(".modifier").click(function(){
  $("input:checkbox").each(function(){
 
      if($(this).val() == donnee[9]){
          $(this).attr('checked', $(this).attr('name')=='check[]');
      }
 
  });
});

SpaceFrog · 01/06/2011, 16h33

Beef !

il s'agit d'attribuer un check pas de changer de name ... !!!

Bovino · 01/06/2011, 16h42

Ben oui

La propriété checked, c'est true ou false, donc j'affecte à checked le résultat du test

Code :

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

$(this).attr('name')=='check[]'

Finality · 02/06/2011, 00h07

Bovino si j'ai bien suivi ton code il y a un problème : celui-ci va cocher ou décocher que les checkbox qui ont la bonne valeur...

Moi j'aurai plutôt fait ça :

Code :

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

1
2
3
4
5
6
7
8
 
$(".modifier").click(function(){
  $("input:checkbox[name='check[]']").each(function(){
 
          $(this).attr('checked', $(this).val() == donnee[9]);
 
  });
});

Ais-je bien compris la problématique ?

SpaceFrog · 02/06/2011, 14h18

tu attribue le name ... pas le check ???

Code :

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

$(this).attr('name')

danielhagnoul · 02/06/2011, 17h42

Bonsoir

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
<!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; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<label>Un : </label><input type="checkbox" name="check[]" value="donnee[1]"/>
		<label>Trois : </label><input type="checkbox" name="check[]" value="donnee[3]"/>
		<label>Six : </label><input type="checkbox" name="check[]" value="donnee[6]"/>
		<label>Neuf : </label><input type="checkbox" name="check[]" value="donnee[9]"/>
		<label>Douze : </label><input type="checkbox" name="check[]" value="donnee[12]"/>
		<button id="btn">Modifier</button>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-02T17:45:00.000+02:00" pubdate>2011-06-02</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(){
			// coche toutes les checkbox
			$("input").prop("checked", true);
 
			//décoche les checkbox qui ne remplissent pas la condition, sans décocher celle qui la remplit
			$("#btn").click(function(){
				$(":checkbox[name='check[]']").each(function(i, item){
					if (item.value != "donnee[9]"){
						item.checked = false;
					}
				});
			});
 
		});
	</script>
</body>  
</html>

Finality · 02/06/2011, 18h15

Je profiterai de la réponse de danielhagnoul pour poser une question sur le comportement de Jquery.

Quand on fait :

Code :

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

1
2
 
$("input").prop("checked", true);

JQuery parcourt-il l'ensemble du DOM afin de checker les checkbox ?

danielhagnoul · 02/06/2011, 19h01

A priori oui.

Il me semblait avoir lu (je n'ai jamais disséqué le code de jQuery) que lorsque le DOM est prêt, jQuery stocke des raccourcis vers le contenu du DOM ce qui lui permet de gagner du temps. Mais je ne trouve aucune référence sur le sujet.

Finality · 02/06/2011, 20h03

J'avoue ne mettre non plus jamais penché sur le core de Jquery.

Car dans le cas où Jquery ferait bien une boucle sur tout le DOM, ne penses tu pas qu'il serait préférable de checker toutes les checkbox en HTML et ensuite d'exécuter ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$("#btn").click(function(){
 
   $(":checkbox[name='check[]']").each(function(i, item){
 
      item.checked = item.value == "donnee[9]");
 
   });
 
});

Ainsi on évite quand même une itération sur le DOM (je suis peut être le seul à chercher à tout moment comment optimiser le moindre script

)

danielhagnoul · 02/06/2011, 20h33

Le JS natif est et sera toujours plus rapide qu'un framework quel que soit son degré d'optimisation, c'est une évidence.

Voir : http://api.jquery.com/checkbox-selector/

En relisant l'API, on ne le fait jamais assez, elle se modifie sans cesse, je m'aperçois que $(":checkbox[name='check[]']") est déconseillé au profit de $("input:checkbox[name='check[]']").

Et l'on recommande d'utiliser $("input[type=checkbox][name='check[]']") qui sera plus rapide sur les navigateurs non obsolètes.

arthuro45 · 03/06/2011, 08h50

Citation:

Envoyé par danielhagnoul

Bonsoir

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
<!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; }
 
		/* -- */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<label>Un : </label><input type="checkbox" name="check[]" value="donnee[1]"/>
		<label>Trois : </label><input type="checkbox" name="check[]" value="donnee[3]"/>
		<label>Six : </label><input type="checkbox" name="check[]" value="donnee[6]"/>
		<label>Neuf : </label><input type="checkbox" name="check[]" value="donnee[9]"/>
		<label>Douze : </label><input type="checkbox" name="check[]" value="donnee[12]"/>
		<button id="btn">Modifier</button>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-02T17:45:00.000+02:00" pubdate>2011-06-02</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(){
			// coche toutes les checkbox
			$("input").prop("checked", true);
 
			//décoche les checkbox qui ne remplissent pas la condition, sans décocher celle qui la remplit
			$("#btn").click(function(){
				$(":checkbox[name='check[]']").each(function(i, item){
					if (item.value != "donnee[9]"){
						item.checked = false;
					}
				});
			});
 
		});
	</script>
</body>  
</html>

Merci, j'ai adapté et ça fonctionne !

01/06/2011, 16h33	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 015 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 015 Points : 45 103 Points : 45 103	Beef ! il s'agit d'attribuer un check pas de changer de name ... !!! __________________ 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

01/06/2011, 16h42	#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	Ben oui La propriété checked, c'est true ou false, donc j'affecte à checked le résultat du test Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).attr('name')=='check[]' __________________ 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

02/06/2011, 19h01	#9
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	A priori oui. Il me semblait avoir lu (je n'ai jamais disséqué le code de jQuery) que lorsque le DOM est prêt, jQuery stocke des raccourcis vers le contenu du DOM ce qui lui permet de gagner du temps. Mais je ne trouve aucune référence sur le sujet. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

02/06/2011, 20h33	#11
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Le JS natif est et sera toujours plus rapide qu'un framework quel que soit son degré d'optimisation, c'est une évidence. Voir : http://api.jquery.com/checkbox-selector/ En relisant l'API, on ne le fait jamais assez, elle se modifie sans cesse, je m'aperçois que $(":checkbox[name='check[]']") est déconseillé au profit de $("input:checkbox[name='check[]']"). Et l'on recommande d'utiliser $("input[type=checkbox][name='check[]']") qui sera plus rapide sur les navigateurs non obsolètes. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

02/06/2011, 14h18	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 015 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 015 Points : 45 103 Points : 45 103	tu attribue le name ... pas le check ??? Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).attr('name') __________________ 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

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