Cocher une seule checkbox dans un tableau html

Version imprimable

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:

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'); } }); });

Un truc du style

Code:

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[]');
      }
 
  });
});

01/06/2011, 16h33
SpaceFrog

8O Beef !

il s'agit d'attribuer un check pas de changer de name ... !!!
01/06/2011, 16h42
Bovino

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

Code:

$(this).attr('name')=='check[]'
02/06/2011, 00h07
Finality
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:

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 ?
02/06/2011, 14h18
SpaceFrog

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

Code:

$(this).attr('name')

Bonsoir

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

02/06/2011, 18h15
Finality
Je profiterai de la réponse de danielhagnoul pour poser une question sur le comportement de Jquery.

Quand on fait :
Code:

1 2 $("input").prop("checked", true);
JQuery parcourt-il l'ensemble du DOM afin de checker les checkbox ?
02/06/2011, 19h01
danielhagnoul

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.
02/06/2011, 20h03
Finality
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:

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 :aie:)
02/06/2011, 20h33
danielhagnoul

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.

Citation:

Envoyé par danielhagnoul

Bonsoir

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