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.

jreaux62 · 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é

jreaux62 · 20/09/2011, 09h46

Citation:

Envoyé par bambou74

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

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

Citation:

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.

jreaux62 · 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>

20/09/2011, 08h56	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 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 040 Points : 45 141 Points : 45 141	http://www.developpez.net/forums/d89...y/#post5391893 __________________ 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

20/09/2011, 10h07	#8
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Avec mon code, si. Vu que le souci ne vient pas du jQuery : Vérifie (ou montre) le code HTML des checkbox. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

20/09/2011, 09h08	#3
bambou74 Invité de passage Inscription : mars 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : mars 2011 Messages : 9 Points : 2 Points : 2	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.
	00

20/09/2011, 09h24	#5
bambou74 Invité de passage Inscription : mars 2011 Messages : 9 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : mars 2011 Messages : 9 Points : 2 Points : 2	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é
	00

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