Partage

Gestion case à cocher totale et individuelle

décochage/cochage d'une checkbox individuelle gérer la checkbox totale

Sujet résolu

13 janvier 2023 à 11:22:03

Bonjour, j'ai encore un petit soucis de javascript, j'ai un tableau avec des cases à cocher individuelles et une case à cocher globale qui coche ou décoche toutes les individuelles, cette partie fonctionne bien (merci un ancien post de Openclassrooms)!

J'ai trouvé de nombreux post sur ce sujet, mais là ou je galère c'est si on coche toutes les cases individuelles "manuellement" c'est d'obtenir le cochage de la globale et à l'inverse si on a tout de coché et qu'on enlève une case individuelle le décochage de la checbox globale...

J'ai bien une piste mais lors de l'appel à la fonction javascript la case que l'on vient de cocher n'est vu qu'au 2eme appel à la fonction (comme si on faisait appel à la fonction javascript associée au onclick de la checkbox avant le changement d'état de celle-ci...

Bon peut-être qu'un peu de code sera plus parlant..

code html : j'ai francisé l'ordre javascript par sur clique car sinon le site ne voulait pas le code html...

<input type="checkbox"  id ="check_all" name="check_all" sur clique="toggle(this)"/> 
					
					<label 
					for="check_all" style="color:blue; font-size:20px; font-weight: bold;"><?= $texte_RAZ5?></style>
					</label> 
				</div>
	
								<table>
									<thead>

<?php 
	echo  '<tr><th>'.$texte_RAZ1. '</th><th>'.$texte_RAZ2.'</th><th>'.$texte_RAZ3.'</th><th>'.$texte_RAZ4.'</th></tr>';

?>

									</thead>

									<tbody>
<?php
	$cpt=0;
								foreach($tableau  as $don ) {	
															$cpt=$cpt+1;									
										
															
?>
														<tr>
															<td><?= $don['nom']; ?></td>
															
															<td> <?= $don['descriptif'];?></td>
															
															<td> <?= $don['Date_email']; ?></td>																									
															<td> <input type="checkbox" id="<?="don".$cpt;?>" name="<?="don".$cpt;?>"> <label for="<?="don".$cpt;?>" sur clique="toggleUnique(this)"/><?= $texte_RAZ6?></label></td>		
														</tr>
											<?php 
																				}
								
	
?>

									</tbody>

								</table>

La partie javascript : dont la fonction " toogle(this);" fonctionne très bien.

Et mon essai de fonction de gestion de la checkbox globale (check_all) depuis les checkbox individuelles fonction appelée par "toggleUnique(this);"

un ctrl-u si il passe...

	<form method="GET" action="Efface_Alerte.php" >				
			<div>           
				<div class="align-center">
					<input type="checkbox"  id ="check_all" name="check_all" onclick="toggle(this)"/> 
					
					<label 
					for="check_all" style="color:blue; font-size:20px; font-weight: bold;">Tout sélectionner!</style>
					</label> 
				</div>
	
								<table>
									<thead>

<tr><th>Nom de la ruche :</th><th>Type d'alerte :</th><th>Date du dernier email envoyé :</th><th>Sélection :</th></tr>
									</thead>

									<tbody>
														<tr>
															<td>Ruche 1</td>
															
															<td> Détection essaimage primaire</td>
															
															<td> 09/01/2023 06h11:00</td>																									
															<td> <input type="checkbox" id="don1" name="don1"> <label for="don1"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Vol de la ruche</td>
															
															<td> 03/01/2023 00h00:00</td>																									
															<td> <input type="checkbox" id="don2" name="don2"> <label for="don2"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Problème de capteur de Temp. Ext & Hygro</td>
															
															<td> 10/01/2023 00h00:00</td>																									
															<td> <input type="checkbox" id="don3" name="don3"> <label for="don3"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Problème de capteur de Temp. Intérieur</td>
															
															<td> 08/01/2023 09h00:00</td>																									
															<td> <input type="checkbox" id="don4" name="don4"> <label for="don4"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Problème de réception de données</td>
															
															<td> 16/01/2023 12h25:00</td>																									
															<td> <input type="checkbox" id="don5" name="don5"> <label for="don5"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Détection essaimage primaire</td>
															
															<td> 09/01/2023 06h11:00</td>																									
															<td> <input type="checkbox" id="don6" name="don6"> <label for="don6"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 2</td>
															
															<td> Détection essaimage secondaire</td>
															
															<td> 07/01/2023 12h12:19</td>																									
															<td> <input type="checkbox" id="don7" name="don7"> <label for="don7"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 3</td>
															
															<td> Problème de capteur de Temp. Intérieur</td>
															
															<td> 09/01/2023 06h11:00</td>																									
															<td> <input type="checkbox" id="don8" name="don8"> <label for="don8"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 4</td>
															
															<td> Problème de capteur de Temp. Ext & Hygro</td>
															
															<td> 11/01/2023 00h00:06</td>																									
															<td> <input type="checkbox" id="don9" name="don9"> <label for="don9"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
																									<tr>
															<td>Ruche 5</td>
															
															<td> Problème de capteur de Temp. Intérieur</td>
															
															<td> 01/01/2023 00h00:00</td>																									
															<td> <input type="checkbox" id="don10" name="don10"> <label for="don10"onclick="toggleUnique(this)"/>Oui/Non</label></td>		
														</tr>
											
									</tbody>

								</table>

Merci

-
Edité par GillesMangin-Voirin 13 janvier 2023 à 11:26:58

BrainError

13 janvier 2023 à 12:15:33

Salut,

Voici la façon de procéder pour ce genre de chose.

Structure HTML :

<div class="element-parent">
    <input type="checkbox" class="checkbox-individuelle" />
    <input type="checkbox" class="checkbox-individuelle" />
    <input type="checkbox" class="checkbox-individuelle" />
    <input type="checkbox" class="checkbox-individuelle" />
    <input type="checkbox" class="checkbox-globale" />
</div>

Code JS :

const elementParent = document.querySelector('.element-parent');
const checkboxIndividuelles = [...elementParent.querySelectorAll('.checkbox-individuelle')];
const checkboxGlobale = elementParent.querySelector('.checkbox-global');
elementParent.addEventListener('input', function(e) {
    if(checkboxIndividuelles.includes(e.target)) {
        if(checkboxIndividuelles.every(checkboxIndividuelle => checkboxIndividuelle.checked))
            checkboxGlobale.checked = true;
        else
            checkboxGlobale.checked = false;
    }
    else if(e.target === checkboxGlobale) {
        if(checkboxIndividuelles.every(checkboxIndividuelle => checkboxIndividuelle.checked))
            for(const checkboxIndividuelle of checkboxIndividuelles)
                checkboxIndividuelle.checked = false;
        else
            for(const checkboxIndividuelle of checkboxIndividuelles)
                checkboxIndividuelle.checked = true;
    }
});

-
Edité par BrainError 13 janvier 2023 à 12:29:22

GillesMangin-Voirin

13 janvier 2023 à 14:23:10

OK merci je vais essayer cela ce soir, en espérant que cela ne sera pas pour mon code actuel ou le soucis est que lors du clique sur une case (cochage ou décochage) le code javascript qui compte le nombre de case cochée est en avance ou retard (selon le sens cochage et décochage) :

C'est un peu comme si lorsque je cliquais pour par exemple cocher une case individuelle, le compte se faisait d'abord puis seulement la case se cochait du coup je ne vois pas la case cochée, mais je la verrait au clique suivant sur une autre case...

Merci en tout cas je regarde cela et je te dis.

Domi65

13 janvier 2023 à 18:15:16

Bonjour.

En conservant le même HTML que BrainError je te propose cette autre solution (pas qu'elle soit mieux, mais l'exercice m'a plu)

let checks = document.querySelectorAll('.checkbox-individuelle');
for(let check of checks) 
    check.addEventListener('change', verif )
function verif() {
    let touschecked = true;
    for(let i=0, maxi = checks.length; i < maxi ; i++)
	if(checks[i].checked == false) touschecked = false
    document.querySelector('.checkbox-globale').checked =
    (touschecked) ? true : false;
}

GillesMangin-Voirin

13 janvier 2023 à 19:33:31

Bien j'ai testé les 2 solutions :

celle de BrainError je ne suis pas arrivé à la faire fonctionner : sur clique d'une checkbox individuelle j'obtiens cette erreur sur la ligne 9 :

mon_javascript.js:9 Uncaught TypeError: Cannot set properties of null (setting 'checked') at HTMLDivElement.<anonymous> (mon_javascript.js:9:37)

Ai je fais une erreur quelque part j'ai pourtant fais un copié/collé et modifier mon HTML pour rajouter les class comme ceci :

<div class="element-parent">
						<div class="align-center">
							<input type="checkbox"  id ="check_all" name="check_all" class="checkbox-globale" sur clique ="toggle(this)" > 
							
							<label 
							for="check_all" style="color:blue; font-size:20px; font-weight: bold;"><?= $texte_RAZ5?>
							</label> 
						</div>
	
								<table>
									<thead>

<?php 
	echo  '<tr><th>'.$texte_RAZ1. '</th><th>'.$texte_RAZ2.'</th><th>'.$texte_RAZ3.'</th><th>'.$texte_RAZ4.'</th></tr>'; 

?>

									</thead>

									<tbody>
<?php
	$cpt=0;
								foreach($tableau  as $don ) {	
															$cpt=$cpt+1;									
										
															if ( $_SESSION["langage"]=="EN" ){
																							if ( $don['descriptif']=="Vol de la ruche") $don['descriptif']="Hive theft";	 
																							if ( $don['descriptif']=="Problème de capteur de Temp. Ext & Hygro") $don['descriptif']="Ext & Hygro Temp. sensor problem";	
																							if ( $don['descriptif']=="Problème de capteur de Temp. Intérieur") $don['descriptif']="Interior Temp. sensor problem";	
																							if ( $don['descriptif']=="Problème de réception de données") $don['descriptif']="Data reception problem";	
																							if ( $don['descriptif']=="Détection essaimage primaire") $don['descriptif']="Primary swarm detection";	
																							if ( $don['descriptif']=="Détection essaimage secondaire") $don['descriptif']="Secondary swarm detection";	
																							}
?>
														<tr>
															<td><?= $don['nom']; ?></td>
															
															<td> <?= $don['descriptif'];?></td>
															
															<td> <?= $don['Date_email']; ?></td>																									
															<td> <input type="checkbox" id="<?="don".$cpt;?>" name="<?="don".$cpt;?>" class="checkbox-individuelle"> <label for="<?="don".$cpt;?>" ><?= $texte_RAZ6?></label></td>		
														</tr>
											<?php 
																				}
								
	
?>
									

									</tbody>

								</table>
							</div>

J'ai gardé la fonction pour cocher/décocher toutes les cases lors de l'appui sur la checkbox globale (j'ai essayé sans cela ne change pas l'erreur)

Si tu vois ou peut être le soucis je peux réessayer...

La 2eme solution de Domi65 fonctionne bien avec le code HTML, je vais essayer de comprendre un peu plus ce code assez condensé!

Merci à vous deux!

-
Edité par GillesMangin-Voirin 14 janvier 2023 à 19:11:18

Domi65

14 janvier 2023 à 18:37:11

« Je vais essayer de comprendre un peu plus ce code assez condenser » (condensé et non condenser. Mon côté vieux prof)

C'est assez simple :

Ce code applique un "écouteur" aux éléments case à cochées pour lancer la fonction "verif" lorsque la valeur change (après un clic)

Cette fonction coche ou décoche la case globale selon que l'ensemble des autres cases sont cochées ou non.

Tu n'es pas du tout obligé d'utiliser les classes définies par BrainError. Elles ne servent qu'à être reconnues par les sélecteurs de querySelectorAll de et querySelecton

querySelectorAll est vraiment à connaitre. Il facilite bien les choses.

GillesMangin-Voirin

14 janvier 2023 à 19:13:30

Merci j'en ai profité pour corriger la faute d'orthographe.

C'est cela de ne pas se relire...

Merci aussi pour le complément d'informations!

A+

Domi65

16 janvier 2023 à 10:17:19

Bonjour. Puisque tu n'as pas coché la case "résolu", on peut penser que ton sujet est encore valide.

Je me suis rendu compte que la fonction verif() peut être réécrite de façon plus simple : Le nombre de case cochées peut être défini par un simple sélecteur (mon_selecteur:checked). il suffit qu'elle compare ce nombre à celui du nombre total de cases. Ça donne ceci :

function verif() {
let cochees = document.querySelectorAll('.checkbox-individuelle:checked');
    document.querySelector('.checkbox-globale').checked =
      (cochees.length == checks.length) ? true : false;
}

-
Edité par Domi65 16 janvier 2023 à 10:22:25

GillesMangin-Voirin

16 janvier 2023 à 10:56:51

Bonjour, effectivement cela fonctionne aussi comme cela!

Merci

Je n'ai pas clos le sujet, si des fois BrainError souhaitais regarder son code pour voir si c'était moi qui m'était planté avec son code ou si celui-ci présentait un soucis et qu'il souhaitait le corriger pour que je le teste..

Merci encore

A+

Si tu veux jeter un coup d'œil à mon projet...

http://gilles54.no-ip.biz

Domi65

17 janvier 2023 à 11:22:50

« Si tu veux jeter un coup d'œil à mon projet »

Joli, mais je ne vois pas de cases à cocher

A +

SamuelGaborieau3

17 janvier 2023 à 16:14:07

Bonjour, j'ai été voir le projet il y a un gros travaille côté backend, et côté IoT aussi apparemment.

C'est surtout le côté IoT qui m'impressionne, est-ce que tu as monté le projet tout seul ?

Le problème semble avoir été réglé bravo @Domi65, je pense que tu peux passer le sujet en résolu.

@BrainError a fait une erreur sur la sélection:

elementParent.querySelector('.checkbox-global');

Il manque un "e" à la fin de "global" pour que ça corresponde à la structure HTML.

Du coup la sélection renvoi null est ça finit en TypeError lorsque qu'il essaie de modifier un attribut dessus.

Mais de toute façon le code de @Domi65 a l'air plus simple et donc plus lisible.

Juste sur la simplification de la fonction "verif" les tests d'égalité renvoi déjà un boolean, la ternaire est superflu.

document.querySelector('.checkbox-globale').checked = (cochees.length == checks.length) ? true : false;

// pourrait s'écrire:

document.querySelector('.checkbox-globale').checked = (cochees.length == checks.length)

Bonne continuation pour la suite de ton projet.

-
Edité par SamuelGaborieau3 17 janvier 2023 à 16:14:33

suggestion de présentation.

GillesMangin-Voirin

17 janvier 2023 à 17:31:38

Domi65 a écrit:

« Si tu veux jeter un coup d'œil à mon projet »

Joli, mais je ne vois pas de cases à cocher

A +

Oups oui effectivement cette page est réservé à l'administrateur je viens de mettre en ligne une version consultatable... (sans action si pas identifié)

http://gilles54.no-ip.info:9180/RAZ.php

et pour répondre à

SamuelGaborieau3

J'ai corrigé l'erreur de l'absence de globale mais du coup j'ai une erreur de même type mais sur la ligne :

const checkboxIndividuelles = [...elementParent.querySelectorAll('.checkbox-individuelle')];

bon comme tu l'as si justement fais remarqué le code de @domi65 et plus clair et plus court à juste titre j'ai pris en compte ta remarque sur la condition ternaire cela fonctionne très bien ainsi.

Sinon comme tu as peut-être pu le voir sur la page l'apiculteur et ce site (section remerciements) c'est plus un travail collectif de beaucoup de participants (dont vous), je ne fais que le chef d'orchestre( la mise en forme et les tests, les souhaits ) mais le code provient pour beaucoup du forum, car je suis un vieux débutant qui dans sa jeunesse lointaine ne connaissait qu'un peu de C par plaisir informatique sur Apple 2 GS...

Merci encore à tous!

Domi65

17 janvier 2023 à 18:45:56

@Samuel « Juste sur la simplification de la fonction "verif" les tests d'égalité renvoi déjà un boolean, la ternaire est superflu »

Très juste, c'est redondant. Bien vu !

@Gilles

Bon travail collectif !

-
Edité par Domi65 17 janvier 2023 à 19:22:07