[Checkbox] cochage multiple

**Illith** · 25/06/2013, 17h11

Bonjour,

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

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 html :

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

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 :

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

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.

**NoSmoking** · 25/06/2013, 18h35

Bonjour,

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

la réponse est non!

Important : Les règles incontournables d'utilisation de ce forum

**Illith** · 26/06/2013, 09h44

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

**Auteur** · 26/06/2013, 13h02

bonjour,

voici une façon de procéder :

Code html :

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

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 javascript :

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

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;
	}
}

**SylvainPV** · 26/06/2013, 14h43

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 html :

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

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

**Illith** · 26/06/2013, 15h15

Bonjour,

Merci pour vos réponses.

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

Code html :

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

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 :

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
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.

**NoSmoking** · 26/06/2013, 19h00

Je reviens sur

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 :

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

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 html :

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
<!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.

**amelodydz** · 26/06/2013, 19h21

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

Envoyé par Auteur

Code javascript :

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

1
2
	var indexParent = id.split("_")[1];
	var nEnfants = id.split("_")[2];

cette fonction coche bien les enfant mais ne les décoche pas

Envoyé par Auteur

Code javascript :

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

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 javascript :

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

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;
	}
}

**NoSmoking** · 26/06/2013, 20h02

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...

**amelodydz** · 26/06/2013, 21h05

si j'ai bien compris :

Code :

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

id.split("_")

est un tableau de la forme :

Code :

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

array{"idParent", 1, 3}

c'est bien cela ?

**amelodydz** · 26/06/2013, 21h17

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.

**Illith** · 28/06/2013, 14h50

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

[Checkbox] cochage multiple

JavaScript

Discussions similaires

Partager

Partager