jan 15
[Javascript] Tout sélectionner/déselectionner
Problème
Imaginons que nous ayons à gérer une grande liste d’inscrits sur un site. Il peut être utile pour diverses raisons de devoir tout cocher ou décocher. Nous allons voir une possibilité de faire ça avec Javascript.
Le formulaire
Ce formulaire listera simplement les noms d’utilisateur des inscrits.
<form action="#" method="post">
<table>
<tr>
<td>Baboulinet</td>
<td><input type="checkbox" name="selectUser[]" value="Baboulinet" /></td>
</tr>
<tr>
<td>Pikachu</td>
<td><input type="checkbox" name="selectUser[]" value="Pikachu" /></td>
</tr>
<tr>
<td>Chaos</td>
<td><input type="checkbox" name="selectUser[]" value="Chaos" /></td>
</tr>
<tr>
<td>Squall</td>
<td><input type="checkbox" name="selectUser[]" value="Squall" /></td>
</tr>
<tr>
<td>Linoa</td>
<td><input type="checkbox" name="selectUser[]" value="Linoa" /></td>
</tr>
<tr>
<td>Chuck</td>
<td><input type="checkbox" name="selectUser[]" value="Chuck" /></td>
</tr>
<tr>
<td>Eleanor</td>
<td><input type="checkbox" name="selectUser[]" value="Eleanor" /></td>
</tr>
</table>
<p>
<a href="#" onclick="select_all();">Tout sélectionner</a> -
<a href="#" onclick="deselect_all();">Tout désélectionner</a> -
<input type="submit" value="Supprimer les utilisateurs sélectionnés"
onclick="return(confirm('Supprimer tous les utilisateurs sélectionnés ?'));" />
</p>
</form>
Commentaires
Comme vous pouvez le voir, il s’agit ici d’un formulaire très basique. Je n’ai rentré aucune valeur dans la propriété action pour la simple raison que je ne présente ici que la phase de sélection/déselection. Le traitement des données du formulaire sera peut-être traité dans un autre article.
Pour les personnes qui ne sont pas habituées à travailler avec des checkbox, leur nom doit paraitre étrange. Pourquoi le nommer selectUser[] et pas simplement selectUser ? C’est tout simple. Dans notre cas on veut que selectUser soit un tableau, d’où les []. Ainsi quand on récupèrera les données, $_POST['selectUser'] sera un talbeau contenant les valeurs (value) de toutes les checkbox qui ont été cochées. Sinon ça n’aurait contenu que la valeur de la dernière étant donné que la variable aurait changé de valeur à chaque nouvelle checkbox cochée.
Maintenant que le formulaire est fait, il est temps de passer au coeur de cet article : le Javascript.
Javascript
La parti javascript se compose de deux fonctions : select_all() et deselect_all().
select_all()
function select_all() {
var cb = document.getElementsByTagName("INPUT");
for(i=0; i<cb.length; i++){
if(cb[i].type == "checkbox" && cb[i].name == "selectUser[]")
cb[i].checked = true;
}
}
On commence par récupérer tous les balises INPUT dans la variable cb (tableau).
On parcourt ensuite cb et on ne fait cocher que les éléments de type checkbox et du nom selectUser[]. Si on oublie cette dernière condition, cela sélectionnera toutes les checkbox de la page, ce qui posera problème s’il existe d’autres checkbox dans le formulaire.
deselect_all()
function deselect_all() {
var cb = document.getElementsByTagName("INPUT");
for(i=0; i<cb.length; i++){
if(cb[i].type == "checkbox" && cb[i].name == "selectUser[]")
cb[i].checked = false;
}
}
Comme pour select_all() à la différence qu’ici on désélectionne les checkbox selectUser[].
Résultat
Vous pouvez tester le résultat de ces quelques lignes de code en cliquant sur le lien suivant : http://www.delistage.net/tutos/js-select-deselect/index.html.
Limites
Tout d’abord, comme n’importe quel script en JS, il ne fonctionnera que si le Javascript n’est pas désactivé sur le navigateur du visiteur.
L’autre limite est que je n’ai pu le tester que sur Firefox 2 et Internet Explorer 7, sur lesquels il fonctionne parfaitement. En revanche, n’ayant pas de Safari ou IE6/- sous la main, je n’ai aucune certitude sur son fonctionnement sur ces navigateurs. Etant donné que getElementsByTagName() est disponible sur IE6, ça devrait fonctionner aussi, mais un test me permettrait d’être certains.
Rectification : Je viens de tester sous Safari (MacOs X) et ça semble fonctionner correctement.
Evolutions possibles
Parmi les évolutions possibles, on peut faire en sorte cette fonction soit réutilisable pour n’importe quel formulaire sans avoir à la modifier. Pour cela, il suffit simplement de lui donner un paramètre à son appel ce qui donnerait par exemple :
function select_all(cbName) {
var cb = document.getElementsByTagName("INPUT");
for(i=0; i<cb.length; i++){
if(cb[i].type == "checkbox" && cb[i].name == cbName)
cb[i].checked = true;
}
}
function deselect_all(cbName) {
var cb = document.getElementsByTagName("INPUT");
for(i=0; i<cb.length; i++){
if(cb[i].type == "checkbox" && cb[i].name == cbName)
cb[i].checked = false;
}
}
Et pour les appels avec notre exemple :
<a href="#" onclick="select_all('selectUser[]');">Tout sélectionner</a> -
<a href="#" onclick="deselect_all('selectUser[]');">Tout désélectionner</a>
Conclusion
Et voilà, vous pouvez tout sélectionner/déselectionner en un clic, ce qui permet de gagner pas mal de temps dans certains cas.
Articles sur le même sujet :