Compter les checkbox

**bambou74** · 20/09/2011, 08h48

Bonjour,
je viens vers vous car j'ai un petit soucis j'essaie de compter toute les checkbox sélectionnés dans une page
Voici le code html d'un checkbox générée:

Code :

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

1
2
 
<input id="1/1/1" class="select" type="checkbox">

Et voici une partie de mon script javascript :

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
 
$(document).ready(function(){
 
	countSelect();
 
 
	$(':checkbox').click(function(){
		countSelect();
	});
 
	$('#selectAll').click(function(){
		var check = $(".select");
		if(this.checked)
		{		
			check.attr('checked', true);
		}
		else
		{
			check.attr('checked', false);
		}
		countSelect();
	});
});
function countSelect(){
	$("#countSelect").html($(".select").filter(":checked").length + " enregistrements sélectionnés");
}

Le petit problème c'est que lorsque je clique sur une checkbox rien ne se passe alors que si je clique sur la checkbox qui les sélectionne toutes pas de soucis. Avez vous une idée?

Merci d'avance

**SpaceFrog** · 20/09/2011, 08h56

http://www.developpez.net/forums/d89...y/#post5391893

**bambou74** · 20/09/2011, 09h08

Bonjour,
merci mais ma fonction countSelect Marque très bien quand je l’appelle depuis firebug aucun soucis en fait le script ne capture pas l’event du clic sur les checkbox.

Invité · 20/09/2011, 09h21

Bonjour,

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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>test</title>
 
	<!-- Script initialisation jquery -->
	<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		countSelect();
 
		$(':checkbox').click(function(){
			countSelect();
		});
 
		$('#selectAll').click(function(){
			var check = $(".select");
				if(this.checked)
				{		
					check.attr('checked', true);
				} else {
					check.attr('checked', false);
				}
			countSelect();
		});
		function countSelect(){
			$("#countSelect").html($(".select").filter(":checked").length + " enregistrements sélectionnés");
		};	
	});
	</script>
 
</head>
<body>
<p>check all : <input id="selectAll" type="checkbox"/></p>
 
<p>autres : 
	<input id="1/1/1" class="select" type="checkbox"/>
	<input id="1/1/2" class="select" type="checkbox"/>
	<input id="1/1/3" class="select" type="checkbox"/>
	<input id="1/1/4" class="select" type="checkbox"/>
	<input id="1/1/5" class="select" type="checkbox"/>
</p>
<p id="countSelect"></p>
 
</body>
</html>

Tout fonctionne.

**bambou74** · 20/09/2011, 09h24

Je ne vois pas de modifications par rapport a mon code il fonctionne de la meme manière et l’événement n'est pas récupéré

Invité · 20/09/2011, 09h46

Envoyé par bambou74

l’événement n'est pas récupéré

Quel événement ? récupérer quoi ?

Envoyé par bambou74

Le petit problème c'est que lorsque je clique sur une checkbox rien ne se passe

Pourtant, ca fonctionne normalement avec le code ci-dessus :
un clic sur une checbox -> comptage OK.

**bambou74** · 20/09/2011, 09h54

Le clic sur les checkbox n'est pas "trouvé" je m'exprime mal

Code :

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

1
2
3
4
 
$(':checkbox').click(function(){
		countSelect();
	});

Cette parti de code n'est pas exécuté en fait.

Invité · 20/09/2011, 10h07

Avec mon code, si.

Vu que le souci ne vient pas du jQuery :
Vérifie (ou montre) le code HTML des checkbox.

**danielhagnoul** · 24/09/2011, 23h01

Bonsoir

Pour interagir avec du code généré, on doit utiliser "live". À part cela et le toilettage du code, tout fonctionne !

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(122, 79, 79, 1); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		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:2.4em; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<input id="selectAll" type="checkbox">
 
		<div id="countSelect"></div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-09-24T23:00:00.000+02:00" pubdate>2011-09-24</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.4.min.js"></script>
	<script>
		$(function(){
			function countSelect(){
				$("#countSelect").html($("input.select:checked").length + " enregistrements sélectionnés");
			}
 
			// Voir : http://api.jquery.com/checkbox-selector/
			// Voir : http://api.jquery.com/live/
			// pour interagir avec du code généré on doit utilisé live
			$("[type='checkbox']").live("click", function(){
				countSelect();
			});
 
			/*
			 * Avec jQuery 1.6 et plus, il est
			 * préférable d'utiliser la méthode
			 * prop() pour les attributs booléens.
			 */
			$('#selectAll').click(function(){
				var check = $(".select");
 
				if (this.checked){		
					check.prop('checked', true);
				} else {
					check.prop('checked', false);
				}
 
				countSelect();
			});
 
			// Voici le code html d'un checkbox générée !!
			// Il faut donc généré des inputs
 
			var objInput = $("<input/>", {
				"id": "inputID",
				"class": "select",
				"type": "checkbox"
			});
 
			var temp;
 
			for(var i = 0; i < 10; i++){
				temp = objInput.clone();
				temp[0].id += i; // un ID doit être unique et il doit commencer par une lettre
				$("#selectAll").before(temp);
			}
 
			countSelect();
		});
	</script>
</body>  
</html>

Compter les checkbox

jQuery

Discussions similaires

Partager

Partager