Cocher une seule checkbox dans un tableau html

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

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 !

Cocher une seule checkbox dans un tableau html

jQuery

Discussions similaires

Partager

Partager