Bonjour,

En utilisant l'outil de recherche, j'ai trouvé ce fil qui donne le code qui semble faire tout à fait ce dont j'ai besoin :

En cochant une case "mère", on coche toutes les cases "filles", et inversement.

Mais sur ma page, cela ne fonctionne pas, car :

1. L'élément "mère" se trouve entre balises <legend> et les éléments "filles", en dehors ;
2. Certains éléments "filles" sont structurés dans un tableau.

Pour éclaircir la situation voici deux exemples concrets, extraits de mon code mais simplifiés :

Exemple 1

<fieldset>
	<legend>
		<span name="meres" title="groupe1">
			<input type="checkbox" name="mere1" id="mere1" />
			<label for="mere1">Mère 1 <small>(&lt;- Cocher pour sélectionner tout)</small></label>
		</span>
	</legend> 

	<span name="filles" title="groupe1">
		<input type="checkbox" name="fille1" id="fille1" />
		<label for="fille1"><a href="..." class="fille1">1</a></label>

		<input type="checkbox" name="fille2" id="fille2" />
		<label for="fille2"><a href="..." class="fille2">2</a></label>
	</span>
</fieldset>

Exemple 2

<fieldset>
	<legend>
		<span name="meres" title="groupe2">
			<input type="checkbox" name="mere2" id="mere2" />
			<label for="mere2">Mère 2 <small>(&lt;- Cocher pour sélectionner tout)</small></label>
		</span>
	</legend>
			
	<span name="filles" title="groupe2">
		<table>
			<tr>
				<td>
					<input type="checkbox" name="filleA" id="filleA" />
					<label for="filleA"><a href="..." class="filleA">Fille A</a></label>
				</td>
				<td>
					<input type="checkbox" name="filleB" id="filleB" />
					<label for="filleB"><a href="..." class="filleB">Fille B</a></label>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="filleC" id="filleC" />
					<label for="filleC"><a href="..." class="filleC">Fille C</a></label>
				</td>
				<td>
					<input type="checkbox" name="filleD" id="filleD" />
					<label for="filleD"><a href="..." class="filleD">Fille D</a></label>
				</td>
			</tr>
		</table>
	</span>
</fieldset>

Mon problème : dans chacun de ces deux cas, rien ne fonctionne.

Pouvez-vous m'éclairer ? Merci.

PS : je précise que je n'ai que les bases de la base du JavaScript (en gros, j'ai vaguement compris le premier chapitre du tutoriel de JoSé2, uniquement à cause des analogies avec PHP...

PPS : si cela peut vous aider, pour voir la page sur laquelle je travaille (très très loin d'être terminée, les connections SQL, Ajax, etc. ne sont pas encore faits) : ici. Le problème se trouve dans le fieldset "Lignes".

PPPS : le validateur W3C donne l'attribut "name" pour <span> invalide.

Citation : daiima

PPPS : le validateur W3C donne l'attribut "name" pour <span> invalide.

Il n'a pas d'attributs name, c'est normal...
utilise plutôt "id" (unique) ou "class" (pas-unique)

Exemple

<fieldset>
	<legend>
		<span id="meres" title="groupe2">
			<input onchange="check('filles', this.checked);" type="checkbox" name="mere2" id="mere2" />
			<label for="mere2">Mère 2 <small>(&lt;- Cocher pour sélectionner tout)</small></label>
		</span>
	</legend>
			
	<span id="filles" title="groupe2">
		<table>
			<tr>
				<td>
					<input type="checkbox" name="filleA" id="filleA" />
					<label for="filleA"><a href="..." class="filleA">Fille A</a></label>
				</td>
				<td>
					<input type="checkbox" name="filleB" id="filleB" />
					<label for="filleB"><a href="..." class="filleB">Fille B</a></label>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="filleC" id="filleC" />
					<label for="filleC"><a href="..." class="filleC">Fille C</a></label>
				</td>
				<td>
					<input type="checkbox" name="filleD" id="filleD" />
					<label for="filleD"><a href="..." class="filleD">Fille D</a></label>
				</td>
			</tr>
		</table>
	</span>
</fieldset>


<script type="text/javascript">
function check(conteneur, etat){
	var inps = document.getElementById(conteneur).getElementsByTagName('input');
	for(var i = 0;i<inps.length;i++){
		if(inps[i].type == "checkbox"){ //si c'est une checkbox
			inps[i].checked = etat; // on la coche
		}
	}
}
</script>

Merci, cela fonctionne!
Maintenant, j'aimerais savoir comment faire en sorte que, lorsque l'on déselectionne une des cases filles, la case mère soit être déselectionnée automatiquement ?

Remarche

Merci ; cependant, cette fois, cela ne fonctionne pas.

Voilà, corrigé, une connerie avec parentNode qui prend pas de parenthèses...

Toujours rien, hélas.
Petite question : l'emplacement de la fonction importe-t'il ? Je l'ai mis avant le formulaire.

normalement pas... j'ai testé seulement avec Firefox en fait, mais ça marchait !
Testé avec IE6, ça fonctionne aussi (un peu horriblement)
il faut d'abord quitter le champ avant que ça fasse le changement, mais ça fonctionne...

Cela ne pourrait-il pas venir d'un conflit avec ce bout de code qui vient du script que j'ai pris à l'origine :

function SetInputs()
{
	var checkbox=document.getElementsByTagName('input');
	for(var i=0;i<checkbox.length;i++)
	{
		if(checkbox[i].type=="CHECKBOX" || checkbox[i].type=="checkbox")
		{
			if(checkbox[i].parentElement.tagName=="SPAN" || checkbox[i].parentElement.tagName=="span")
			{
				var spans=document.getElementsByTagName('span');
				for(var k=0;k<spans.length;k++)
				{
					if(spans[k].title==checkbox[i].parentElement.title)
					{
						if(checkbox[i].parentElement.name=="meres" && spans[k].name=="filles")
						{
							checkbox[i].onclick =  (function(span,mere){
																		return function() { cocherfilles(span,mere); };
																	})(spans[k],checkbox[i]);;
						}
						if(checkbox[i].parentElement.name=="filles" && spans[k].name=="meres")
						{
							checkbox[i].onclick =  (function(span,fille){
																		return function() { decochermeres(span,fille); };
																	})(spans[k],checkbox[i]);;
						}
					}
				}
			}
		}
	}
var SpanAvecTitles=document.getElementsByTagName('span');
for(var y=0;y<SpanAvecTitles.length;y++)
{
	if(SpanAvecTitles.title=="meres" || SpanAvecTitles.title=="filles")
	{
		SpanAvecTitles.removeAttribute('title');
	}
}
}

?

Si, ça pourrait..
Elle était censée faire quoi cette fonction en fait ?

C'est celle que j'avais initialement trouvée pour faire cette histoire de cases mère/fille.

<html>
<head>
<script type="text/javascript">
//focntions de mise en place des onclick
function SetInputs()
{
	var checkbox=document.getElementsByTagName('input');
	for(var i=0;i<checkbox.length;i++)
	{
		if(checkbox[i].type=="CHECKBOX" || checkbox[i].type=="checkbox")
		{
			if(checkbox[i].parentElement.tagName=="SPAN" || checkbox[i].parentElement.tagName=="span")
			{
				var spans=document.getElementsByTagName('span');
				for(var k=0;k<spans.length;k++)
				{
					if(spans[k].title==checkbox[i].parentElement.title)
					{
						if(checkbox[i].parentElement.name=="meres" && spans[k].name=="filles")
						{
							checkbox[i].onclick =  (function(span,mere){
																		return function() { cocherfilles(span,mere); };
																	})(spans[k],checkbox[i]);;
						}
						if(checkbox[i].parentElement.name=="filles" && spans[k].name=="meres")
						{
							checkbox[i].onclick =  (function(span,fille){
																		return function() { decochermeres(span,fille); };
																	})(spans[k],checkbox[i]);;
						}
					}
				}
			}
		}
	}
var SpanAvecTitles=document.getElementsByTagName('span');
for(var y=0;y<SpanAvecTitles.length;y++)
{
	if(SpanAvecTitles.title=="meres" || SpanAvecTitles.title=="filles")
	{
		SpanAvecTitles.removeAttribute('title');
	}
}
}
//fonctions pour cocher/décocher (sont attribuées automatiquement aux onclick des input checkbox dans focntions précédentes
function cocherfilles(span,mere)
{
	if(mere.checked)
	{
		var filles=span.getElementsByTagName('input');
		for(var i=0;i<filles.length;i++)
		{
			if(filles[i].type=="CHECKBOX" || filles[i].type=="checkbox")
			{
				filles[i].checked=true;
			}
		}
	}
}
function decochermeres(span,fille)
{
	if(fille.checked)
	{
		var meres=span.getElementsByTagName('input');
		for(var i=0;i<meres.length;i++)
		{
			if(meres[i].type=="CHECKBOX" || meres[i].type=="checkbox")
			{
				meres[i].checked=false;
			}
		}
	}
}
</script>
</head>
<body onload="SetInputs()">
....
</body>

Bien sûr j'ai rmeplacé les fonctions cocherfilles et decochermeres par celles que tu m'as fournies.

ben, vire là :p, celle que je t'ai donnée fonctionne toute seule

Même après l'avoir enlevé, cela ne résoud rien...

Je te passe un extrait de la page :

<fieldset>
	<legend>
		<span id="mere1" title="groupe1">
			<input onchange="check('filles1', this.checked);"  type="checkbox" name="v_tousvl" id="v_tousvl" /> 
			<label for="v_tousvl">Véhicules légers <small>(&lt;- Cocher pour sélectionner tout)</small></label>
		</span>
	</legend>

	<span id="filles1" title="groupe1">
		<input onchange="uncheckMere('mere1',this);" type="checkbox" name="v_clio" id="v_clio" /> 
		<label for="v_clio">Renault - Clio 2 (Véhicule de service) </label><br />

		<input type="checkbox" onchange="uncheckMere('mere1',this);" name="v_c4p" id="v_c4p" /> 
		<label for="v_c4p">Citröen - C4 Picasso (Taxibus Sous-traitance)</label><br />
	</span>
</fieldset>

okay... bah, j'ai fait l'exemple avec l'autre fieldset. la fonction n'est pas la même
l'autre utilise un tableau pour s'afficher, ce qui veut dire 3 X .parentNode pour arriver à table, tandis que là, pour arriver au parent qui contient toutes les filles, tu as un seul parentNode, et ça suffit (je te laisse corriger)

J'ai donc supprimé deux des trois .parentNode, mais toujours sans résultat.
Au pire, ce n'est pas trop grave, je pense. Je vais laisser cette fonction de côté.
Merci quand même de ton aide, car j'ai au moins la possibilité de tout sélectionner en une seule case ce qui est déjà une belle avancée pour moi.