begin process at 2012 02 05 22:18:30
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > CHECKBOX QUI SELECTIONNE TOUTE LES AUTRES

CHECKBOX QUI SELECTIONNE TOUTE LES AUTRES


 Information sur la source

Note :
5,25 / 10 - par 4 personnes
5,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Débutant Date de création :12/04/2005 Vu :15 511

Auteur : meudeuk

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Voila un petit script simple qui permet de cocher ou decocher une liste de checkbox, en clickant sur une checkbox "maitre".
Je l'utilise lors de la creation dynamique d'un tableau avec en premiere colone une checkbox. Il marche meme dans le cas ou il n'y a qu'une seul ligne

Source

  • //elle prend en parametre la checkbox "maitre", et une checkbox ou une liste de checkbox.
  • 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
  • }
  • }
  • }
//elle prend en parametre la checkbox "maitre", et une checkbox ou une liste de checkbox.
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
		}
	}
}

 Conclusion

Petit explication sur l'utilisation:
dans un formulaire on place une checkbox "maitre" en lui associant la fonction selectall sur l'action onclick:
<input type="checkbox" name="all" onclick="selectall(document.monform.all,document.m onform.choix)">
puis un liste de checkbox
<input type="checkbox" name="choix" value="1">
<input type="checkbox" name="choix" value="2">
<input type="checkbox" name="choix" value="3">


 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Commentaires et avis

Commentaire de crashtest le 12/04/2005 12:26:12

Lu,
stp quand tu mes une sources écri tous car c'est un peu chiant de chercher a droite et a gauche pour former ton script.
le voila former :

<html><head>
<title>checkbox maître</title>
<script>
//checkbox ou une liste de checkbox.
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
    }
  }
}</script>
</head>

<body>
<form name="monform">
<input type="checkbox" name="all" onclick="selectall(document.monform.all,document.monform.choix)">
puis un liste de checkbox
<input type="checkbox" name="choix" value="1">
<input type="checkbox" name="choix" value="2">
<input type="checkbox" name="choix" value="3"></form>
</body></html>

Commentaire de Romain128 le 12/04/2005 13:13:46

Fonctionne parfaitement sous IE et Gecko!

Commentaire de meudeuk le 13/04/2005 19:02:02

scuse, c'est ma premiere sources. Mais bon c'est pas trop dur a faire un formulaire, si ? :p

je ferais comme il faut la prochaine fois :p

Commentaire de jijaLaClasse le 06/10/2007 15:05:20 8/10

ton code est très cool, d'ailleurs je me suis servie de la technique, mais le seul problème qui se pose, c'est que je n'arrive pas à accéder avec php à un élément du groupe de checkbox qui porte le même nom. j'ai essayé d'utiliser le nom du checkbox comme un tableau mais quand même ca passe pas. C'est quoi la solution?

Commentaire de Ghaldur le 25/11/2007 15:28:01

salut, je trouve l'initiavie très bonne mais je t'avouerai que ce script a un but utile, mais une fonctionnalité inutile, je m'exlpique:
dans un formulaire, si tu as des checkbox, c'est pour exprimer des choix etc... (le formulaire sera utilisé via php) bref, donc pour différencier ces choix tu dois identifier chaque checkbox par un nom unique... or dans ton exemple, toutes les checkbox ont le même nom "choix", par conséquent lors de l'envoi de la requête, tu confirmaras juste 3 fois la même chose... inutile n'est-ce pas?
donc dans ce cas là, je change le nom des 2 autres checkbox, mais à la fin ta checkbox maitresse ne coche plus qu'une seule checkbox... autant l'enlever et cocher à la main la checkbox, non?...

je pense que tu pourrais améliorer le script en gardant ta base qui est simple et légère, mais en faisant en sorte que l'on puisse mettre des noms uniques aux checkbox

Commentaire de LiveChatteur le 25/01/2008 04:31:53

Salut je suis tombé par hasard sur cette page , je t'ai écrit la solution mais j'ai pas eu le temps de vous faire la partie PHP , si vous avez le temps venez vister mon site www.livechatteur.fr Merci d'avance...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Exemple</title>
<SCRIPT LANGUAGE="JavaScript">
function ManagementCheckBox (ValNumber)
{
if (document.formulaire.allselect.checked == true)
{
var Loop = 1;
for (var x=1;x<=ValNumber;x++)
{
document.getElementsByName("checkbox"+Loop)[0].checked=true;
Loop++;
}
}
else
{
var Loop = 1;
for (var x=1;x<=ValNumber;x++)
{
document.getElementsByName("checkbox"+Loop)[0].checked=false;
Loop++;
}
}
}
</script>
</head>
<body>
<form name="formulaire" method="POST" action="" enctype="multipart/form-data">
<input type="checkbox" name="allselect" onClick="ManagementCheckBox('5')"> Sélectionner tout<br>
<input type="checkbox" name="checkbox1" value="option 1"> option 1<br>
<input type="checkbox" name="checkbox2" value="option 2"> option 2<br>
<input type="checkbox" name="checkbox3" value="option 3"> option 3<br>
<input type="checkbox" name="checkbox4" value="option 4"> option 4<br>
<input type="checkbox" name="checkbox5" value="option 5"> option 5<br>
</form>
</body>
</html>

Commentaire de jonomo le 09/10/2009 15:07:28

Bonjour a tous,

Je souhaite creer un formulaire ou j'ai 4 checkbox maitres(bleu, vert, rouge, jaune), et plusieurs autres a choisir avec l'un ou l'autre des maitres . Il devrait etre tel que:

- Je choisis un maitre avec lequel je clik sur deux ou trois simples checkbox, ceux-ci prennent la couleur du maitre.
- Je choisis un autre maitre, je fais la meme chose, mais sans decocher les premiers choix, et ainsi de suite. A la fin je valide le formulaire. Je voudrais savoir si cela est possible. Si oui qulequ'un a-t-il une solution?

Merci.

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales