11548 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Fonction sélectionner toutes les checkboxs

Solution trouvée par lddsoft
petite erreur JS : getElementById('monform') is null
Solution pour contrer l'erreur JS trouvée par N3k0
voir les solutions en fin de post


bonjour à tous,

j'ai une petite liste de fichiers avec une case à cocher juste devant, pour me permettre de sélectionner des fichiers à supprimer.
Ma liste s'affiche bien, et je récupère bien mon tableau de donnée, et j'arrive à supprimer comme je le veux Smiley smile

maintenant je veux faire du détails, et je pense à l'utilisateur Smiley smile pour lui simplifier la tâche je voudrais lui permettre de cliquer sur une petite case à cocher qui sélectionnerai toutes les cases à cochées ; afin de lui éviter de tous sélectionner à la main ^^ !

j'ai écrit une petite fonction et étangement cela marche si j'enlève les "[]" du name des checkbox, mais si je les enlève je ne peux pas récupérer ma liste ensuite...

ma liste : 

echo '<form name="monform" method="POST" action="groupeController.php?id='.$groupe['id'].'&action=nettoyer">';
echo '<input type="checkbox" name="all" onclick="selectall(document.monform.all,document.monform.file[])"> Tous ';
		
        foreach ($result AS $res){
			echo '<input type="checkbox" name="file[]" value="'.$res.'">'.$res.'<br/>';
	}
echo '<input type="submit" value="supprimer">';
echo '</form>';


ma fonction js : 

    function selectall(cas,choix){
	//test si on a plusieur ligne
	if(choix.length>0){
		if (cas.checked){
			for (var i=0; i<choix.length;i++){
			choix[i].checked=true
			}
		}
		else{
			for (var i=0; i<choix.length;i++){
			choix[i].checked=false
			}
		}
	}
	else{
		if (cas.checked){
			choix.checked=true
		}
		else{
			choix.checked=false
		}
	}
}


merci pour votre aide =D[/i][/i]
Modifié par mini-truc (18 May 2011 - 17:34)
Bonjour,

mini-truc a écrit :
j'ai écrit une petite fonction et étangement cela marche si j'enlève les "[]" du name des checkbox, mais si je les enlève je ne peux pas récupérer ma liste ensuite...

Effectivement, le problème est là. Tes checkbox ne sont pas nommés correctement!

Cordialement
Je veux bien te croire, mais si j'enlève les [] des checkboxs je ne récupère que la derniere valeur sélectionné dans les checkboxs...
et comme les case à cocher servent à coché 0 ou plusieurs cases... faut bien que je puisse toute les récupérer ...

Je peux me tromper mais cela marchait bien comme çà, mais je veux bien un exemple qui me contredise et qui marche !! comme çà plus de problèmes avec ma fonction ^^
Bonjour

Voici une fonction que j'avais faite et qui fonctionne (chez moi en tout cas) avec ou sans les crochets (je viens de tester).


function selectAll (ch) {
	var tab = document.getElementsByTagName("input"); 
	for (var i = 0; i < tab.length; i++) { 
		if (tab[i].type == "checkbox")
			tab[i].checked = ch.checked;
	}
}


C'est bien sûr à adapter à ton cas.
ch est la case à cocher qui doit sélectionner/désélectionner toutes les autres.


<input type="checkbox" id="Tout" name="Tout" onclick="selectAll(this)" />
[/i][/i]
Examine ceci et vois ce que tu peux en faire. Je n'ai pas employé d'attribut "name", mais plutôt des attributs "id".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="lddsoft">
<title>Cocher/Décocher tous les checkbox</title>
<script type="text/javascript">
function cocher_tout(){
	var chb = document.getElementById('frm').getElementsByTagName("input");
	if(chb.length>2){ // s'il y a d'autres input que "Sélectionner tout" et "Supprimer"
		// si la case "Sélectionner tout" est cochée
		if(document.getElementById('tout').checked==true){
			for(var c=0;c<chb.length;c++){
				if(chb[c].id.substr(0,1)=="f"){chb[c].checked=true;} // si l'id du checkbox commence par "f"
			}
		}
		else{  // si la case "Sélectionner tout" est décochée
			for(var c=0;c<chb.length;c++){
				if(chb[c].id.substr(0,1)=="f"){chb[c].checked=false;}
			}
		}
	}else{ // il n'y a pas de checkbox avec id commençant par "f"
		return;
	}
}
</script>
</head>
<body>
	<form id="frm" method="POST" action="groupeController.php?id='.$groupe['id'].'&action=nettoyer">
		<!-- Les inputs des fichiers seraient créés dynamiquement par ton script PHP -->
		<input type="checkbox" id="f1" value="Fichier 1">Fichier 1<br>
		<input type="checkbox" id="f2" value="Fichier 2">Fichier 2<br>
		<input type="checkbox" id="f3" value="Fichier 3">Fichier 3<br>
		<input type="checkbox" id="f4" value="Fichier 4">Fichier 4<br>
		<input type="checkbox" id="f5" value="Fichier 5">Fichier 5<br>
		<br>		
		<input type="checkbox" id="tout" onclick="cocher_tout();">Sélectionner tout<br>
		<input type="submit" id="supprimer" value="Supprimer">
	</form>
</body>
</html>
Merci ! çà marche super bien ;p je n'ai pas supprimé les [] des cases à cocher
j'ai un peu modifier ton code pour qu'il corresponde au miens

en gros j'ai modifier ma fonction je l'ai remplacer intégralement par la tienne
dans la fonction j'ai changer le nom du formulaire

et j'ai ajouté des id=f* dans mes checkboxs

merci beaucoup Smiley smile

Merci aussi pour ton apport NiKo2b, j'avais aussi trouvé quelque chose du genre qui marchait bien mais qui n’était pas complet, il ne gère pas comme la fonction de lddsoft le décochage.
Mais je te remercie beaucoup pour ton apport Smiley smile
Modifié par mini-truc (18 May 2011 - 12:37)
oulala ! j'ai parlé trop vite ! =X

j'ai une petite erreur JS : getElementById('monform') is null
Modifié par mini-truc (18 May 2011 - 14:57)
As-tu bien mis dans ta balise "form" ==> ... id="monform" ... ?

Comme tu as certainement modifié (adapté) ma source, je ne vois pas bien ce qui pourrait clocher...
oui, j'ai remplacé mon <form name="monform" par <form id="monform"

mais sinon çà marche très bien dans l'ensemble
Modifié par mini-truc (18 May 2011 - 15:17)
il ne change pas vraiment du précédent hormis ta fonction mais revoilà le code : 

echo '<form id="monform" method="POST" action="groupeController.php?id='.$groupe['id'].'&action=nettoyer">';
		
		$i=1;
		foreach ($result AS $res){
			if($i==1){
				echo 'Fichiers non répertoriés : <br/>';
				echo '<input type="checkbox" id="tout" onclick="cocher_tout();">Sélectionner tout<br/>';
			}
			echo '<input type="checkbox" id="f'.$i.'" name="file[]" value="'.$res.'">'.$res.'<br/>';
			$i++;
		}
		if($i>1){
			echo '<input type="submit" value="supprimer">';
		}	
		echo '</form>';




function cocher_tout()
{
		var chb = document.getElementById('monform').getElementsByTagName("input");

	if(chb.length>2){ // s'il y a d'autres input que "Sélectionner tout" et "Supprimer"

		// si la case "Sélectionner tout" est cochée

		if(document.getElementById('tout').checked==true){

			for(var c=0;c<chb.length;c++){

				if(chb[c].id.substr(0,1)=="f"){chb[c].checked=true;} // si l'id du checkbox commence par "f"

			}

		}

		else{  // si la case "Sélectionner tout" est décochée

			for(var c=0;c<chb.length;c++){

				if(chb[c].id.substr(0,1)=="f"){chb[c].checked=false;}

			}

		}

	}else{ // il n'y a pas de checkbox avec id commençant par "f"
		return;

	}	
}
Désolé, mais je ne vois vraiment pas où se situerait l'erreur dans le code que je vois ici.
Elle est peut-être liée au script PHP qui crée dynamiquement le formulaire (modif/adaptation au nouveau code oubliée, par exemple).
Faut peut-être attendre que le navigateur ait fini de charger #monform avant de pouvoir le sélectionner ?

En gros, lancer cocher_tout() sur un window.load.
J'ai effectivement pensé à ça aussi. La solution serait de placer le script javascript avant la balise de fermeture < /body> de la page.
Bonjour,

a écrit :
J'ai effectivement pensé à ça aussi. La solution serait de placer le script javascript avant la balise de fermeture < /body> de la page.

Le soucis est que l'action est déclenchée au click... le formulaire est présent dans la page à ce moment là...
Par contre, si ton formulaire se trouve dans un <p> par exemple, il arrive que IE 8/9 supprime la balise form ( problème vu après intégration dans un tinyMCE récement ) Smiley smile .


je vais faire mon chieur mais j'aurai remplacé :


echo '<form id="monform" method="POST" action="groupeController.php?id='.$groupe['id'].'&action=nettoyer">'; 
         
        $i=1; 
        foreach ($result AS $res){ 
            if($i==1){ 
                echo 'Fichiers non répertoriés : <br/>'; 
                echo '<input type="checkbox" id="tout" onclick="cocher_tout();">Sélectionner tout<br/>'; 
            } 
            echo '<input type="checkbox" id="f'.$i.'" name="file[]" value="'.$res.'">'.$res.'<br/>'; 
            $i++; 
        } 
        if($i>1){ 
            echo '<input type="submit" value="supprimer">'; 
        }     
        echo '</form>';


par :


$iCount = count($result);
if ($iCount) {
?>
<form id="monform" method="POST" action="groupeController.php?id=<?php echo $groupe['id']; ?>&action=nettoyer">
  <div>
  <span>Fichiers non répertoriés : </span><br/>
  <input type="checkbox" id="tout" onclick="cocher_tout();" />Sélectionner tout<br/>
<?php

    for($i=0; $i < $iCount; $i++) {
?>
  <input type="checkbox" id="f<?php echo $i; ?>" name="file[]" value="<?php echo $result[$i]; ?>" /><?php echo $result[$i]; ?><br/>
<?php
    }
?>
  <input type="submit" value="supprimer">
  </div>
</form>
<?php
}


- Ton formulaire ne sert à rien si tu n'as aucun fichier, autant ne pas l'afficher ( ça évite aussi le ($i>1) pour n'afficher que le submit... )
- Un petit conteneur dans ton formulaire
- La fermeture de toutes tes balises input
- Pas de texte posé " comme ça " dans un élément qui n'est pas fait pour ça.
- Séparation du code HTML et PHP ( les "echo" de code HTML c'est pas beau )
- Evite de faire un "$i==1" à chaque itération du foreach... alors que ça ne sert qu'une fois et que c'est FORCEMENT affiché.


Avec le code que je viens de te mettre là, ton JS fonctionne nickel...
Modifié par n3k0 (18 May 2011 - 17:27)
Sujet clos
Aller à