Aide - Recherche - Membres - Calendrier
Version complète : Checkbox [Select/Deselect ALL complexe]
Forum Développeur - Administration serveur, programmation et base de données > Programmation > Javascript et AJAX
Cut Here
May 11 2005, 03:06 PM
Bonjour a tous,

voila je travaille actuellement sur un Back Office de plate forme de formation en ligne (du genre Dokeos mais sans le traitement XML et des normes Scorm) et dans ce cadre, je suis confronté à un problème dont je ne vois pas comment me dépatouiller (et google ne m'a pas aidé icon_confused.gif ).

J'ai un listing de toutes mes catégories (sélectionné via php dans ma base sql) avec pour chaque catégories la liste des cours.

Exemple :

Défaut []
Comptabilité [
Les origines de la comptabilité
Les missions de la comptabilité
]


En fait, devant chaque catégorie, je voudrais avoir une checkbox qui quand je la sélectionne ou déselectionne me coche et décoche toutes les checkbox des cours associés à cette catégorie.

J'ai trouvé un script pour cocher et tout décocher. J'ai une fonction qui me permet de pouvoir avoir plusieurs groupes de checkbox associé a un bouton.

Je ne sais pas si je suis bien clair donc je mets en piece jointe une capture.

Je pensais utiliser la fonction que j'appliquerai pour chaque groupe, sauf que lorsque je dois TOUT sélectionner (toutes les cours de toutes les catégories) ça ne marche pas.

[attachmentid=2207]

Voici la fonction que j'ai trouvé :

CODE
<script>
var checkflag = "false";
function check(field)
{
if (checkflag == "false")
{
 for (i = 0; i < field.length; i++)
 {
  field[i].checked = true;
 }
 checkflag = "true";
 return "Décocher tout";
}
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Cocher tout"; }
}

</script>


Et je l'appelle de cette façon :
CODE
<input type=button value="Cocher tout" onclick="this.value=check(this.form.list)">
pour le groupe de checkbox nommé list
CODE
<input type=checkbox id=list name="list[]" value=1>


Bref la un tit coup de main serait le bievenue svp, je pense que certains ont déja du etre confronté a ce genre de cas.

MERCI

Julien
++
Cut Here
May 12 2005, 02:11 PM
Bon ce n'est pas moi qui est codé et j'avoue que même si je comprends le code, je le trouve lourd.

Mais si ça peut dépanner certains, je préfere en faire profiter.
(C'est issu du site de l'anpe).

Le .html
CODE
<html>
<head>
<script language="JavaScript" src="cocher.js"></script>
</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">


<form name="monFormulaire" method="POST">
<input type="checkbox" name="checkCategorie" value="01" onclick="cocherTout()">
<b>Toutes les catégories</b>

<hr>

<input type="checkbox" name="checkSousCategorie" value="42" onclick="SousCategorieCheck(0)"> Défaut<br>
<input type="checkbox" name="checkSousSousCategorie" value="4267" onclick="SousSousCategorieCheck(0)"> Cours 01<br>
<input type="checkbox" name="checkSousSousCategorie" value="4268" onclick="SousSousCategorieCheck(1)"> Cours 02
<p>&nbsp;</p>

<input type="checkbox" name="checkSousCategorie" value="72" onclick="SousCategorieCheck(1)"> Comptabilité

<hr>

<input type="checkbox" name="checkCategorie" value="99" disabled>

</form>
</body>
</html>


et le .js
CODE
/* Initialise la liste de checkbox passée en paramètre Décoche l'ensemble des cases de la liste */
function resetListe( maListe )
{
for (i=0; i< maListe.length; i++ )
{
 maListe[i].checked = false;
}
}


function traitementsInitialisation()
{
// La catégorie parent est cochée, on coche tout les catégories filles
if ( document.monFormulaire.checkCategorie[0].checked )
{
 
 //On couche toutes les sous catégories
 for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
 {
  document.monFormulaire.checkSousCategorie[i].checked = true;
 }
 
 // On coche tous les Sous Sous catégories
 for( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  document.monFormulaire.checkSousSousCategorie[j].checked = true;
 }
}


// Parcours de la liste des Sous catégories
for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
{
 //Si une sous catégorie est cochée, alors je coche les sous sous catégories
 if ( document.monFormulaire.checkSousCategorie[i].checked )
 {
  // parcours de la liste des sous catégories
  for ( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
  {
   //Afin de créer le groupes de checkbox, on va attribuer un nom
   var text = document.monFormulaire.checkSousSousCategorie[j].value;
   // On teste si les 2 premiers caracteres (ici des chiffres) des Sous Sous catégories sont bien identiques à ceux des Sous catégories
   if ( document.monFormulaire.checkSousCategorie[i].value == text.substring( 0, 2 ) )
   {
    // Si oui, on coche les Sous Sous catégories
    document.monFormulaire.checkSousSousCategorie[j].checked = true;
   }
  }
 }
}
}



//Cette fonction permet de décocher toutes les cases à cocher
function initialisation()
{
resetList( document.monFormulaire.checkCategorie );
resetList( document.monFormulaire.checkSousCategorie );
resetList( document.monFormulaire.checkSousSousCategorie );

traitementsInitialisation();
}


function cocherTout()
{
if ( document.monFormulaire.checkCategorie[0].checked )
{
 for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
 {
  document.monFormulaire.checkSousCategorie[i].checked = true;
 }

 for( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  document.monFormulaire.checkSousSousCategorie[j].checked = true;
 }
}
else
{
 for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
 {
  document.monFormulaire.checkSousCategorie[i].checked = false;
 }
 for( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  document.monFormulaire.checkSousSousCategorie[j].checked = false;
 }
}
}

function SousCategorieCheck( index )
{
if ( document.monFormulaire.checkSousCategorie[index].checked )
{
 for ( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  var text = document.monFormulaire.checkSousSousCategorie[j].value;
  if ( document.monFormulaire.checkSousCategorie[index].value == text.substring( 0, 2 ) )
  {
   document.monFormulaire.checkSousSousCategorie[j].checked = true;
  }
 }
 var isCheckedCategorie = true;
 for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
 {
  isCheckedCategorie = isCheckedCategorie && document.monFormulaire.checkSousCategorie[i].checked;
 }
 document.monFormulaire.checkCategorie[0].checked = isCheckedCategorie;
}
else
{
 for ( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  var text = document.monFormulaire.checkSousSousCategorie[j].value;
  if ( document.monFormulaire.checkSousCategorie[index].value == text.substring( 0, 2 ) )
  {
  document.monFormulaire.checkSousSousCategorie[j].checked = false;
  }
 }
 document.monFormulaire.checkCategorie[0].checked = false;
}
}


function SousSousCategorieCheck( index )
{
var SousCategorie;
var indexSousCategorie;
 
for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
{
 var text = document.monFormulaire.checkSousSousCategorie[index].value;
 if ( document.monFormulaire.checkSousCategorie[i].value == text.substring( 0, 2 ) )
 {
  SousCategorie = document.monFormulaire.checkSousCategorie[i];
  indexSousCategorie = i;
 }
}
if ( document.monFormulaire.checkSousSousCategorie[index].checked )
{
var isCheckedSousCategorie = true;
 for ( j = 0; j < document.monFormulaire.checkSousSousCategorie.length; j++ )
 {
  var text = document.monFormulaire.checkSousSousCategorie[j].value;
  if ( SousCategorie.value == text.substring( 0, 2 ) )
  {
   isCheckedSousCategorie = isCheckedSousCategorie && document.monFormulaire.checkSousSousCategorie[j].checked;
  }
 }
SousCategorie.checked = isCheckedSousCategorie;
var isCheckedCategorie = true;
 for ( i = 0; i < document.monFormulaire.checkSousCategorie.length; i++ )
 {
  isCheckedCategorie = isCheckedCategorie && document.monFormulaire.checkSousCategorie[i].checked;
 }
document.monFormulaire.checkCategorie[0].checked = isCheckedCategorie;
}
else
{
 SousCategorie.checked = false;
 document.monFormulaire.checkCategorie[0].checked = false;
}
}
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.