CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 20 09:37:03

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Navigation

> ARBORESCENCE ( À NIVEAUX QUASI ILLIMITÉ ) DE CHECKBOX AVEC LOGIQUE COCHE/DÉCOCHE

ARBORESCENCE ( À NIVEAUX QUASI ILLIMITÉ ) DE CHECKBOX AVEC LOGIQUE COCHE/DÉCOCHE

Information sur la source

Note :

8,00 / 10

Catégorie :Navigation Classé sous :checkbox, arborescence, arbre, sélection Niveau :Initié Date de création :09/06/2007 Date de mise à jour :10/06/2007 01:32:31 Vu :7 218

Auteur : Grafiii

Ecrire un message privé

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

Arborescence de checkbox ( Ver 1 ) à niveaux quasi illimité.
Permettant de cocher et décocher intuitivement.

Source

<html>
<head>
<script>
// ********************************************************************* //
// Ce script permet de construire une arborescence ( à niveaux quasi-illimité )
// de checkbox avec logique intuitive de coche/décoche.
//
// Il prend en entrée un tableau représentant l' (ou les) arbre(s) (voir ci-dessous )
//
//
// ******************************************************************** //
var Itree=new Array("check1,check2,check3","check3,check4,check5","check5,check6,check7,check8","check8,check9");
// Itree représente un arbre. Cet arbre est représenté par un ensemble d'éléments.
// Ici:
// "check1,check2,check3" est un élément.
// "check3,check4,check5" est un autre élément.
//
// Chaque élement se structure ainsi: Les noeuds sont séparé par des virgules.
// Le premier noeud correspond a un noeud quelconque de l'arbre.
// Les noeud suivants correspondent à ses fils directs.
// Exemple pour Itree:
// "check1,check2,check3" : signifie que check1 est le pére direct de check2,check3.
// "check3,check4,check5" : signifie que check3 est le pére direct de check4,check5.
//
// Les noms check1,check2 ... représente les ID des checkbox.
// Attention: il faut veiller à ne pas mettre de cycle !
// Exemple: ("check1,check2","check2,check1")
// Exemple: On peut représenter l'arbre :
//
// -- check1
// --- check3
// --- check2
// ------ check4
// ------ check5
// Par
// ("check1,check2,check3","check2,check4,check5");
// ***************** Fonctions de gestion d'un arbre ****************
// ======================= Obtenir les fils directs =================
// ==================================================================
function getDirectChilds( graph , node )
{
var childs = new Array();
for( i = 0; i<graph.length; i++)
{
var tabNodes = graph[i].split(",");
if( node == tabNodes[0] )
{
for( j = 1; j<tabNodes.length; j++)
{
childs.push(tabNodes[j]);
}
} // On est possible de mettre un "return childs" ici.
// (Les autres noeuds ne seront pas traités)
}
return childs;
}
// ================ Obtenir tous les fils ( récursivement ) =========
// ==================================================================
function getChilds ( graph , node )
{
var childs = getDirectChilds( graph, node );
var allChilds = new Array();
if(childs.length>0)
{
for(var i = 0; i < childs.length; i++)
{
allChilds = allChilds.concat(getChilds( graph , childs[i] ));
}
}
return childs.concat(allChilds);
}
// ==================== Obtenir le parent d'un noeud ================
// ==================================================================
function getDirectParent( graph , node )
{
for( var i = 0; i <graph.length;i++)
{
var tabNodes = graph[i].split(",");
for( var j = 1; j < tabNodes.length; j++)
{
if(tabNodes[j]==node) return tabNodes[0];
}
}
return "";
}
// ============= Obtenir tous les parents (récursivement) ===========
// ==================================================================
function getParents( graph , node )
{
var parent = new Array();
var node = getDirectParent(graph,node);
if(node!="")
{
parent.push(node);
parent = parent.concat(getParents(graph,node));
}
return parent;
}
// *********************** Fonctions pour les checkbox **************
// ==== Coche le noeud parent si tous les fils sont cochés ==========
// ==================================================================
function doCheckParent ( graph, nodeId)
{
if(nodeId != "")
{
var childs = getDirectChilds( graph, nodeId );
for(var i=0;i<childs.length;i++)
{
if(document.getElementById(childs[i]).checked == false) return;
}
document.getElementById(nodeId).checked=true;
doCheckParent( graph, getDirectParent( graph , nodeId)) ;
}
}
// =============== Coche tous les fils du noeud =====================
// ==================================================================
function doCheck( graph, nodeId )
{
var childs = getChilds( graph, nodeId );
var parent = getDirectParent ( graph , nodeId);
for (var i = 0; i<childs.length; i++)
{
document.getElementById(childs[i]).checked=true;
}
doCheckParent( graph , parent );
}
// ======== Décoche tous les fils et tout les noeuds parents =======
// ==================================================================
function doUncheck( graph, nodeId )
{
var childs = getChilds( graph, nodeId );
var parents = getParents( graph, nodeId );
for (var i = 0; i<childs.length; i++)
{
document.getElementById(childs[i]).checked=false;
}
for (var i = 0; i<parents.length; i++)
{
document.getElementById(parents[i]).checked=false;
}
}
// ====== Fonction principale: coche si pas coché sinon décoche =====
// ==================================================================
function doEvent( graph , nodeId )
{
node = document.getElementById(nodeId);
if(node != null)
{
if(node.checked) doCheck( graph, nodeId );
else doUncheck( graph, nodeId );
}
}
</script>
</head>
<body>
<input type="checkbox" name="checkboxes" id="check1" onClick="doEvent( Itree ,'check1')"/><b>Tous mes disques</b><br />
   <input type="checkbox" name="checkboxes" id="check2" onClick="doEvent( Itree ,'check2')"/>Disques 2007<br />
   <input type="checkbox" name="checkboxes" id="check3" onClick="doEvent( Itree ,'check3')"/><b><i>Disques < 2007</i></b><br />
      <input type="checkbox" name="checkboxes" id="check4" onClick="doEvent( Itree ,'check4')" />Disques 2006<br />
      <input type="checkbox" name="checkboxes" id="check5" onClick="doEvent( Itree ,'check5')"/><b><i>Disques < 2006</i></b><br />
            <input type="checkbox" name="checkboxes" id="check6" onClick="doEvent( Itree ,'check6')"/>Disque 2004<br />
            <input type="checkbox" name="checkboxes" id="check7" onClick="doEvent( Itree ,'check7')"/>Disque 2003<br />
            <input type="checkbox" name="checkboxes" id="check8" onClick="doEvent( Itree ,'check8')"/><b><i>Disques < 2003</i></b><br />
               <input type="checkbox" name="checkboxes" id="check9" onClick="doEvent( Itree ,'check9')"/>Disque 2001<br />
</body>
</html>

<html>
<head>
<script>


// ********************************************************************* //
// Ce script permet de construire une arborescence ( à niveaux quasi-illimité ) 
// de checkbox avec logique intuitive de coche/décoche.
//
// Il prend en entrée un tableau représentant l' (ou les) arbre(s) (voir ci-dessous )
// 				     
//				      
// ******************************************************************** //





var Itree=new Array("check1,check2,check3","check3,check4,check5","check5,check6,check7,check8","check8,check9");





// Itree représente un arbre. Cet arbre est représenté par un ensemble d'éléments.
// Ici:
// "check1,check2,check3" est un élément.
// "check3,check4,check5" est un autre élément.
//
// Chaque élement se structure ainsi: Les noeuds sont séparé par des virgules.
// 				      Le premier noeud correspond a un noeud quelconque de l'arbre.
//				      Les noeud suivants correspondent à ses fils directs.

// Exemple pour Itree:
// "check1,check2,check3" : signifie que check1 est le pére direct de check2,check3.
// "check3,check4,check5" : signifie que check3 est le pére direct de check4,check5.
//
// Les noms check1,check2 ... représente les ID des checkbox.

// Attention: il faut veiller à ne pas mettre de cycle !
//	     Exemple: ("check1,check2","check2,check1")


// Exemple: On peut représenter l'arbre :
//
//  -- check1
//     	  --- check3
//   	  --- check2
//               ------ check4
//               ------ check5
// Par
// ("check1,check2,check3","check2,check4,check5");






// ***************** Fonctions de gestion d'un arbre ****************


// ======================= Obtenir les fils directs =================
// ==================================================================


	function getDirectChilds( graph , node )
	{
		var childs = new Array();

		for( i = 0; i<graph.length; i++)
		{

			var tabNodes = graph[i].split(",");		

			if( node == tabNodes[0] )
			{
				for( j = 1; j<tabNodes.length; j++)
				{
					childs.push(tabNodes[j]);				
				}
			} // On  est possible de mettre un "return childs" ici. 
                          // (Les autres noeuds ne seront pas traités)

		}
		
		return childs;
	}
	


// ================ Obtenir tous les fils ( récursivement ) =========
// ==================================================================


	function getChilds ( graph , node )
	{
		var childs = getDirectChilds( graph, node );
		var allChilds = new Array();

		if(childs.length>0)
		{
			for(var i = 0; i < childs.length; i++)
			{
				allChilds = allChilds.concat(getChilds( graph , childs[i] ));
				
			}
		}
		return childs.concat(allChilds);
	}




// ==================== Obtenir le parent d'un noeud ================
// ==================================================================

	function getDirectParent( graph , node )
	{
		for( var i = 0; i <graph.length;i++)
		{
			var tabNodes = graph[i].split(",");
			for( var j = 1; j < tabNodes.length; j++)	
			{
				if(tabNodes[j]==node) return tabNodes[0];
			}
		}	
		return "";
	}






// ============= Obtenir tous les parents (récursivement) ===========
// ==================================================================

	function getParents( graph , node )
	{
		var parent = new Array();
		var node  = getDirectParent(graph,node);
		if(node!="")
		{
			parent.push(node);
			parent = parent.concat(getParents(graph,node));
		}
		return parent;
		
	}






// *********************** Fonctions pour les checkbox **************

	
// ==== Coche le noeud parent si tous les fils sont cochés ==========
// ==================================================================

	function doCheckParent ( graph, nodeId)	
	{
		if(nodeId != "")
		{
			var childs = getDirectChilds( graph, nodeId );
			for(var i=0;i<childs.length;i++)
			{
				if(document.getElementById(childs[i]).checked == false) return;
			}
			document.getElementById(nodeId).checked=true;
			doCheckParent( graph, getDirectParent( graph , nodeId)) ;
		}
	}



// =============== Coche tous les fils du noeud =====================
// ==================================================================

	function doCheck( graph, nodeId )
	{
		var childs = getChilds( graph, nodeId );
		var parent = getDirectParent ( graph , nodeId);
		for (var i = 0; i<childs.length; i++)
		{
			document.getElementById(childs[i]).checked=true;
		}
		doCheckParent( graph , parent );
	}
	

// ======== Décoche tous les fils et tout les noeuds parents =======
// ==================================================================

	function doUncheck( graph, nodeId )
	{
		var childs = getChilds( graph, nodeId );
		var parents = getParents( graph, nodeId );

		for (var i = 0; i<childs.length; i++)
		{
			document.getElementById(childs[i]).checked=false;
		}
		for (var i = 0; i<parents.length; i++)
		{
			document.getElementById(parents[i]).checked=false;
		}		
			
	}



// ====== Fonction principale: coche si pas coché sinon décoche =====
// ==================================================================


	function doEvent( graph , nodeId )
	{
		node = document.getElementById(nodeId);
		if(node != null)
		{
			if(node.checked) doCheck( graph, nodeId );
			else doUncheck( graph,  nodeId );
		}
	}



</script>
</head>
<body>

<input type="checkbox" name="checkboxes" id="check1" onClick="doEvent( Itree ,'check1')"/><b>Tous mes disques</b><br />

&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check2" onClick="doEvent( Itree ,'check2')"/>Disques 2007<br />

&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check3" onClick="doEvent( Itree ,'check3')"/><b><i>Disques < 2007</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check4" onClick="doEvent( Itree ,'check4')" />Disques 2006<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check5" onClick="doEvent( Itree ,'check5')"/><b><i>Disques < 2006</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check6" onClick="doEvent( Itree ,'check6')"/>Disque 2004<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check7" onClick="doEvent( Itree ,'check7')"/>Disque 2003<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check8" onClick="doEvent( Itree ,'check8')"/><b><i>Disques < 2003</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check9" onClick="doEvent( Itree ,'check9')"/>Disque 2001<br />


</body>
</html>

Conclusion

Mise en place:
On renseigne un (ou des) tableau(x) (Array) représentant(s) l'arborescence. On ajoute un event onClick sur les checkbox avec le nom du tableau + l'id de la checkbox.

Compatible avec la plupart des navigateurs ( une seule méthode utilisée getElementById() (norme W3C) ).

Note: On peut utiliser plusieurs arbres ou n'en utiliser qu'un (ce qui est tout aussi efficace car les ID sont uniques).
Seulement pour certains cas pratiques et notamment pour une utilisation avec des pages dynamiques il est plus simple d'en utiliser plusieurs.

Note 2: Pour être tout a fait propre dans le code on peut ajouter des tests "!=null" lors des appels getElementById
Il est également possible d'intégrer une détection de cycle. A vous d'imaginer...

Historique

10 juin 2007 01:21:47 :: Ajout de commentaire + suppression d'un argument inutile
10 juin 2007 01:32:31 :: Modification de l'exemple

Sources du même auteur

CRYPTAGE PAR DÉCALAGE D'UN EMAIL

Toutes les sources de Grafiii

Sources de la même categorie

EMULATION DE $_GET() DU PHP par jchan

ACCESSIBARRE - AMÉLIORER LE CONFORT DES PERSONNES NON-VOYANT... par Pfuch

CLASS BARRE DE DÉFILEMENT (SCROLLBAR) JAVASCRIPT par TheWeasel47

TAILLEFONTE par tiger222

MOTEUR DE RECHERCHE SANS PHP par jdmcreator

Toutes les sources de la catégorie Navigation

Sources en rapport avec celle ci

OUTIL DE SÉLECTION par jdmcreator

JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv

OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

GENERATEUR D ARBRE par Kimjoa

FICHIER XP par hadrien01

Commentaires et avis

Commentaire de wizard512 le 10/06/2007 14:02:09

Source intérréssante et aparament peux etre ficilement configurable.
Simple et éfficace        8/10

P.S: remplace tous les "document.getElementById( x )" par "getElement( x )"
et rajoute cette fonction pour une meilleur compatibilité de ton code,
sinon rien a redire....

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

getElement = function( id )
{
    if ( document.getElementById )
    {
         return document.getElementById( id );
    }

    if ( document.layers )
    {
         return document.id;
    }

    return document.all.id;
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Commentaire de kodyman le 29/03/2008 19:53:57

Bonjour

Script efficace mais comment récupérer les valeurs des checkboxes (pour un traitement ultérieur en php par exemple) alors qu'elles portent toutes le meme nom....

A+

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

sélection de checkbox [ par alaiz ] bonjour, voilà mon problème, j'utilisais la source ci après sur mes pages... http://www.javascriptfr.com/code.aspx?id=15990 mais comm Savoir si un element du formulaire existe ??? [ par tonic1 ] Bonjour a tous, mon probleme est assez simple, mais je n aie pas trouve de solution.Je construit un formulaire dynamique compose de plusieurs checkbox Appel de fonction à partir d'une autre page [ par flexx ] Bonjour J'ai créé une classe arbre (qui affiche une arborescence) avec des méthodes comme ajouter(noeud), supprimer(noeud), dessiner() Vérifier si les checkbox d'un formulaire sont bien cochés et si les boutons radios suivant sont aussi sélectionné [ par Alore1207 ] Bonjour, j'ai un problème de javascript. C'est un peu compliqué à expliquer mais je vais tenter de décrire au mieux mon probl&#232 3 selections parmis x ? bouton radio ou checkbox ? [ par vincentsage ] Bonjour, j'ai un formulaire dans lequel on doit pouvoir saisir un, deux, ou 3 choix parmis n, quelle technique je dois employer ? Sachant que je crois vérifier qu'au moins une checkbox d'un formulaire est cochée [ par silvia12 ] Bonjours, J'aimerais vérifié qu'au moins une chekbox a été coché dans mon formulaire a savoir que je créer mé texbox en fonction de ma base de donnée, probleme radio/checkbox [ par spiesalex ] salut j'ai un petit problème en javaScript: je voudrait que en désactionnant un radio que les checkbox redevienne grisée voila mon c Aide pour checkbox [ par nagrom_om ] Je cherche a faire une fonction qui permet de savoir si une checkbox est coché :Cela vou parait il correct ? :function IsChecked(objForm) {& Défi : Problème pour la désactivation d'un checkbox [ par billou_13 ] Voila ma question touche surtout le fait que ma checkbox pointée possède un nom (name) et un identifiant (id) qui sont un mot composé e cocher des checkbox par des liens [ par tekyo ] Salut à tous, je suis débutant et je n'arrive pas à faire ne sorte que mes cases à cocher se coche aussi par l'intermédiaire d'un lien. Pour une et s

Nos sponsors

Derniers Blogs

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

Forum

RE : TRI D'UNE LISTE DIV par pipoulito

RE : TRI D'UNE LISTE DIV par PetoleTeam

TRI D'UNE LISTE DIV par pipoulito

RE : COMMENT CRéER UNE COMPTEUR EN JAVASCRIPT? par PetoleTeam

RE : RéALISATION D'UNE PAGE WEB par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods