Traitement des cases à cocher par lot

Version imprimable

Bonjour,
J'ai 3 groupes de cases à cocher chk[]. Pour chacun des groupes j'ai une case à cocher chkAll qui force à cocher toutes les cases à cocher de son groupe et lorsqu'elle est décochée vide toutes les cases de ce groupe. Si une case quelconque du groupe est décochée, la case chkAll est automatiquement décochée.
Maintenant, je voudrais que si toutes les cases du groupe sont cochées la case chkAll soit automatiquement cochée mais je ne vois pas comment faire.

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
const
	chkAll	= document.querySelectorAll("[name*='chkAll']")
	,chk	= document.querySelectorAll("[name*='chk']")
	;
var sum = [];
 
if(chkAll.length){
	chkAll.forEach(function(curChk, index){
		curChk.addEventListener('change', function(e){
			switch(e.target.value){
				case 'customers':
					for(let i=0; i<13; i++){
						chk[i].checked = curChk.checked;
					}
				break;
				case 'infos':
					for(let i=14; i<18; i++){
						chk[i].checked = curChk.checked;
					}
				break;
				case 'employees':
					for(let i=19; i<28; i++){
						chk[i].checked = curChk.checked;
					}
				break;
			}
		}, false );
	});
}
 
if(chk.length){
	chk.forEach(function(curChk, index){
		curChk.addEventListener('change', function(e){
			let n;
			if(index<13)
				n=0;
			else if(index>18)
				n=2;
			else
				n=1;
			if(curChk.checked == false){
				chkAll[n].checked = false;
			}
		}, false );
	});
}

Extrait du code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
		<fieldset><legend>Données du fichier adresses</legend>
			<label><input type="checkbox" name="chk[]" value="c.id"><span>Identifiant client</span></label><br>
			<label><input type="checkbox" name="chk[]" value="c.company_name"><span>Société cliente</span></label><br>
			<label><input type="checkbox" name="chk[]" value="c.company_fullname"><span>Complément</span></label><br>
			<p>
				<label><input type="checkbox" name="chkAll" value="customers"><span>Sélectionner tout le cadre</span></label><br>
			</p>
		</fieldset>
			<fieldset><legend>Données du fichier interlocuteurs</legend>
				<label><input type="checkbox" name="chk[]" value="e.gender"><span>Civilité</span></label><br>
				<label><input type="checkbox" name="chk[]" value="e.title"><span>Titre</span></label><br>
				<label><input type="checkbox" name="chk[]" value="e.firstname"><span>Prénom</span></label><br>
			<p>
				<label><input type="checkbox" name="chkAll" value="employees"><span>Sélectionner tout le cadre</span></label><br>
			</p>
			</fieldset>

25/02/2022, 16h34
moimp
Pour tenter de répondre au problème, j'essaie de compter les cases cochées mais ça ne marche pas. La variable sum reste indéfiniment à 0.
Code:

1 2 3 4 5 6 sum = 0; for(let i=0; i<13; i++){ if(chk[i].checked == true) sum++; console.log(sum); }

Je préfère identifier les éléments avec des classes ou des ids, c'est plus lisible et ça évite comme dans ton cas que les inputs de chaque groupe soient liés au groupe suivant
Pour ton dernier problème je pense que c'est parce que tu ne dois pas mettre ce code dans l'écouteur d'évènement donc il est évalué au départ et pas lors du changement.
Voici une solution :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
</head>
 
<body>
    <fieldset>
        <legend>Données du fichier adresses</legend>
        <label><input class="address" type="checkbox" name="chk[]" value="c.id"><span>Identifiant client</span></label><br>
        <label><input class="address" type="checkbox" name="chk[]" value="c.company_name"><span>Société cliente</span></label><br>
        <label><input class="address" type="checkbox" name="chk[]" value="c.company_fullname"><span>Complément</span></label><br>
        <p>
            <label><input id="address-master" type="checkbox" name="chkAll" value="customers"><span>Sélectionner tout le cadre</span></label><br>
        </p>
    </fieldset>
    <fieldset>
        <legend>Données du fichier interlocuteurs</legend>
        <label><input class="inter" type="checkbox" name="chk[]" value="e.gender"><span>Civilité</span></label><br>
        <label><input class="inter" type="checkbox" name="chk[]" value="e.title"><span>Titre</span></label><br>
        <label><input class="inter" type="checkbox" name="chk[]" value="e.firstname"><span>Prénom</span></label><br>
        <p>
            <label><input id="inter-master" type="checkbox" name="chkAll" value="employees"><span>Sélectionner tout le cadre</span></label><br>
        </p>
    </fieldset>
    <script>
        const addressChkBox = document.querySelectorAll('.address');
        const nb_checkbox_address = addressChkBox.length //nombre de checkboxes pour l'adresse
        const interChkBox = document.querySelectorAll('.inter');
        const nb_checkbox_inter = interChkBox.length
        const addressMaster = document.querySelector('#address-master');
        const interMaster = document.querySelector('#inter-master');
 
        addressMaster.addEventListener('change', () => {
            isMasterChecked = event.target.checked;
            addressChkBox.forEach(e => {
                e.checked = isMasterChecked
            })
        })
 
        addressChkBox.forEach(add => {
            add.addEventListener('change', () => {
                const nb_checkboxes_checked = document.querySelectorAll('.address:checked').length
                addressMaster.checked = nb_checkboxes_checked === nb_checkbox_address //equivalent au code suivant, on affecte le resultat du test, si toutes les cases sont ccochées alors true donc case cochée sinon false pas cochée
                //                if(nb_checkboxes_checked === nb_checkbox_address) {
                //                    addressMaster.checked = true;
                //                } else {
                //                    addressMaster.checked = false;
                //                }
            })
        })
 
        interMaster.addEventListener('change', () => {
            isMasterChecked = event.target.checked;
            interChkBox.forEach(e => {
                e.checked = isMasterChecked
            })
        })
 
        interChkBox.forEach(add => {
            add.addEventListener('change', () => {
                const nb_checkboxes_checked = document.querySelectorAll('.inter:checked').length
                interMaster.checked = nb_checkboxes_checked === nb_checkbox_inter
 
            })
        })
 
    </script>
</body>
</html>

26/02/2022, 08h56
moimp

J'ai repris mon code en retravaillant les paramètres de mes querySelectorAll() (ma solution). J'ai mis le code qui ne l'était pas dans l'écouteur et tout fonctionne impeccable. Merci! :D