[Checkbox] cochage multiple

Version imprimable

Bonjour,

J'ai cherché partout mais là je bloque. :calim2:

Je cherche à cocher plusieurs checkbox de mes input lorsque j'ai coché une checkbox parent.

Le problème c'est que rien ne définit un héritage dans les checkbox et que du coup je n'arrive pas à récupérer les names ou id correspondants aux checkbox à cocher. Sachant qu'en plus les noms sont variables, je dispose néanmoins d'un tableau listant indifféremment mais dans l'ordre les parents et les checkbox enfant

Voici mon code créant l'affichage de mes checkbox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form action="cs.php" method="POST"> <table> <tr class="pos"><td><input type="checkbox" name="dev208_POS" value="dev208_POS" onChange="others()" onClick="others()">dev208_POS</td></tr> <tr><td class="spooltab"><input type="checkbox" name="dev208_POS" value="15632716">15632716</td></tr> <tr class="pos"><td><input type="checkbox" name="dev498_POS" value="dev498_POS" onChange="others()" onClick="others()">dev498_POS</td></tr> <tr><td class="spooltab"><input type="checkbox" name="dev498_POS" value="15632934">15632934</td></tr> <tr class="pos"><td><input type="checkbox" name="dev575_POS" value="dev575_POS" onChange="others()" onClick="others()">dev575_POS</td></tr> <tr><td class="spooltab"><input type="checkbox" name="dev575_POS" value="15632677">15632677</td></tr> </table> <p> <input type="hidden" name="action" value="clean"> <input type="submit" value="Clean spools"> </p> </form>
Ensuite mon problème vient du JavaScript permettant de cocher les td de class 'spooltab' ayant comme unique parent le tr de class 'pos'
Code:

1 2 3 4 5 6 7 function others() { var c = document.getElementsByName(); for(var i=0;i<c.length;c++) { c[i].checked = true; } }
Merci de votre aide sur ce point. :ccool:

25/06/2013, 18h35
NoSmoking

Bonjour,

Citation:

Je ne sais pas si ce code est très clair.

la réponse est non!
:fleche: Important : Les règles incontournables d'utilisation de ce forum
26/06/2013, 09h44
Illith

:aie: Oui, désolé, merci pour ce rappel. J'ai modifié le code en conséquence.

bonjour,

voici une façon de procéder :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- id du parent a 2 paramètres séparés par des _ : son index et le nombre d'enfants à cocher : -->
<!-- id des enfants commence par l'index du parent-->
<input type="checkbox" id="idParent_1_3" onclick="clicParent(this.id)"/><label for="idParent1">parent 1</label><br/>
<input type="checkbox" id="idEnfant_10" style="margin-left:20px"/><label for="idEnfant10">enfant 1</label><br/>
<input type="checkbox" id="idEnfant_11" style="margin-left:20px"/><label for="idEnfant11">enfant 2</label><br/>
<input type="checkbox" id="idEnfant_12" style="margin-left:20px"/><label for="idEnfant12">enfant 3</label><br/>
<br/>
<input type="checkbox" id="idParent_2_4" onclick="clicParent(this.id)"/><label for="idParent1">parent 2</label><br/>
<input type="checkbox" id="idEnfant_20" style="margin-left:20px"/><label for="idEnfant20">enfant 1</label><br/>
<input type="checkbox" id="idEnfant_21" style="margin-left:20px"/><label for="idEnfant21">enfant 2</label><br/>
<input type="checkbox" id="idEnfant_22" style="margin-left:20px"/><label for="idEnfant22">enfant 3</label><br/>
<input type="checkbox" id="idEnfant_23" style="margin-left:20px"/><label for="idEnfant22">enfant 3</label><br/>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function clicParent(id)
{
	//id du checkbox parent a 2 paramètres séparés par des "_" : son index et le nombre d'enfants à cocher 
	var indexParent = id.split("_")[1];
	var nEnfants = id.split("_")[2];
	var i;
 
	alert("index parent=" + indexParent);
	alert("nombre d'enfants=" + nEnfants);
 
	for (i=0; i<nEnfants; i++)
	{
		document.getElementById("idEnfant_"+indexParent+i).checked = true;
	}
}

26/06/2013, 14h43
SylvainPV

Une autre solution qui n'impose pas de modifier les ID serait d'utiliser une classe ou un data-attribute pour référencer la checkbox parente.

Code:

<input type="checkbox" data-parent="ID_DU_PARENT"/>

Bonjour,

Merci pour vos réponses.

J'ai avancé. En y ajoutant un id + numéro.

Code:

1
2
3
4
5
6
7
8
9
10
<table>
<tr class="pos"><td><input type="checkbox" name="dev208_POS" value="dev208_POS" onChange="checkUn('dev208_POS',1)" onClick="checkUn('dev208_POS',1)">dev208_POS</td></tr>
<tr><td class="spooltab"><input type="checkbox" name="15683339" id="dev208_POS1" value="15683339">15683339</td></tr>
<tr class="pos"><td><input type="checkbox" name="dev498_POS" value="dev498_POS" onChange="checkUn('dev498_POS',1)" onClick="checkUn('dev498_POS',1)">dev498_POS</td></tr>
<tr><td class="spooltab"><input type="checkbox" name="15683563" id="dev498_POS1" value="15683563">15683563</td></tr>
<tr class="pos"><td><input type="checkbox" name="dev575_POS" value="dev575_POS" onChange="checkUn('dev575_POS',1)" onClick="checkUn('dev575_POS',1)">dev575_POS</td></tr>
<tr><td class="spooltab"><input type="checkbox" name="15683308" id="dev575_POS1" value="15683308">15683308</td></tr>
<tr class="pos"><td><input type="checkbox" name="dev671_POS" value="dev671_POS" onChange="checkUn('dev671_POS',1)" onClick="checkUn('dev671_POS',1)">dev671_POS</td></tr>
<tr><td class="spooltab"><input type="checkbox" name="15683600" id="dev671_POS1" value="15683600">15683600</td></tr>
</table>

Mais j'ai l'impression que mon javascript ne retrouve pas mes éléments.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function checkUn (posname, nbid) {
 
	posname += ''
 
	if (document.getElementById(posname).checked) {
		for (var i=1; i<nbid+1; i++) {
			var obj = document.getElementById(posname+i)
			obj.checked = true
		}
	} else {
		for (var i=1; i<nbid+1; i++) {
			var obj = document.getElementById(posname+i)
			obj.checked = false
		}
	}
}

L'indice de mes id commence à 1.

je tourne en rond en essayant de réécrire 100 fois ce code de manière différente mais je bloque toujours à l'execution. :cry:

Je reviens sur

Citation:

Envoyé par Illith

var c = document.getElementsByName();

getElementsByName attend un paramètre, le name.

Sinon en utilisant le code fourni pas Auteur, on peut faire une fonction simple en formatant les ID comme suite

idparent1
  idparent1_0
  idparent1_1
  idparent1_2
idparent2
  idparent2_0
  idparent2_1
  idparent2_2

la fonction

Code:

1
2
3
4
5
6
7
8
9
function checkUn( objet){
  var prefixe = objet.id +"_";
  var state = objet.checked;
  var i=0, oEnfant;
  while( oEnfant = document.getElementById( prefixe +i)){
    oEnfant.checked = state;
    i++;
  }
}

et un appel, onclick="checkUn(this)" en passant en paramètre l'objet lui même, this donc.

Pour test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Check ALL</title>
<script>
function checkUn( objet){
  var prefixe = objet.id +"_";
  var state = objet.checked;
  var i=0, oEnfant;
  while( oEnfant = document.getElementById( prefixe +i)){
    oEnfant.checked = state;
    i++;
  }
}
</script>
</head>
<body>
<input type="checkbox" id="idParent1" onclick="checkUn(this)"/><label for="idParent1">parent 1</label><br/>
<input type="checkbox" id="idParent1_0" style="margin-left:20px"/><label for="idParent1_0">enfant 1</label><br/>
<input type="checkbox" id="idParent1_1" style="margin-left:20px"/><label for="idParent1_1">enfant 2</label><br/>
<input type="checkbox" id="idParent1_2" style="margin-left:20px"/><label for="idParent1_2">enfant 3</label><br/>
<br/>
<input type="checkbox" id="idParent2" onclick="checkUn(this)"/><label for="idParent2">parent 2</label><br/>
<input type="checkbox" id="idParent2_0" style="margin-left:20px"/><label for="idParent2_0">enfant 1</label><br/>
<input type="checkbox" id="idParent2_1" style="margin-left:20px"/><label for="idParent2_1">enfant 2</label><br/>
<input type="checkbox" id="idParent2_2" style="margin-left:20px"/><label for="idParent2_2">enfant 3</label><br/>
<input type="checkbox" id="idParent2_3" style="margin-left:20px"/><label for="idParent2_3">enfant 3</label><br/>
</body>
</html>

La même approche pourrait être réalisée en utilisant les names.

Pouvez vous s'il vous plais m'expliquer le fonctionnement de id.split ici
Citation:
Envoyé par Auteur
Code:

1 2 var indexParent = id.split("_")[1]; var nEnfants = id.split("_")[2];
cette fonction coche bien les enfant mais ne les décoche pas
Citation:
Envoyé par Auteur
Code:

1 2 3 for (i=0; i<nEnfants; i++){ document.getElementById("idEnfant_"+indexParent+i).checked = true; }
pour décocher le tout il faut faire comme suit :
Code:

1 2 3 4 5 6 7 8 9 for (i=0; i<nEnfants; i++){ // si parent true alors tous ses enfant le devienne sinon l'inverse if(document.getElementById(id).checked == true){ document.getElementById("idEnfant_"+indexParent+i).checked = true; } else { document.getElementById("idEnfant_"+indexParent+i).checked = false; } }

26/06/2013, 20h02
NoSmoking

Citation:

Envoyé par amelodydz

Pouvez vous s'il vous plais m'expliquer le fonctionnement de id.split ici

un minimum de recherche sur le langage t'aurais surement amené à https://developer.mozilla.org/en-US/...s/String/split, ou autre...
26/06/2013, 21h05
amelodydz

si j'ai bien compris :

Code:

id.split("_")

est un tableau de la forme :

Code:

array{"idParent", 1, 3}

c'est bien cela ?
26/06/2013, 21h17
amelodydz

Citation:

Envoyé par NoSmoking

un minimum de recherche sur le langage t'aurais surement amené à https://developer.mozilla.org/en-US/...s/String/split, ou autre...

merci

des fois j’essaie de comprendre le comportement d'un programme en faisant plusieurs tests après modification.
28/06/2013, 14h50
Illith

Merci pour vos réponses.

En ajoutant un id incrémenté, j'ai pu récupérer mes "enfants" ;) avec un document.getElementById. L'argument "name" etant conservé comme à l'origine pour récupérer les valeurs de POST.

J'ai dû pour cela un peu modifier la création de mes lignes d'input mais tout fonctionne correctement désormais.

Merci encore pour les pistes :ccool: