[JS] Invertion de checkbox

thib1990

11 février 2006 à 10:25:50

Voila tout est dans la question !

Comment inverser toutes les checkbox d'un formulaire...
Voila merci !

shuss

11 février 2006 à 14:24:06

Voilà un exemple de script (à partir d'un script de m@teo) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function inverse()
{
steak = document.getElementById('steak');
frites = document.getElementById('frites');
epinards = document.getElementById('epinards');
huitres = document.getElementById('huitres');
bouton = document.getElementById('bouton');
forme = document.getElementById('forme');
forme.insertBefore(steak, huitres);
// Et on peux continuer à désordonner les champs ...
}
</script>
</head>
<body>
<form id="forme">
<label id="frites"><input type="checkbox" name="frites"/> Frites<br /></label>
<label id="steak"><input type="checkbox" name="steak"/> Steak haché<br /></label>
<label id="epinards"><input type="checkbox" name="epinards"/> Epinards<br /></label>
<label id="huitres"><input type="checkbox" name="huitres"/> Huitres<br /></label>
<input type="button" onClick="javascript:inverse()" value="inverser" id="bouton" />
</form>
</body>
</html>

Il suffit de redéfinir l'emplacement de chacune des case en les rattachant à <form>. J'ai mis les <br/> dans les <label> pour simplifier la tâche.

thib1990

11 février 2006 à 14:36:53

Ah excusez moi mais en fait heu... :euh:

Quand je disais inverser les checkbox c'est pas changer l'ordre où on les voit mais décocher tous les cochés et cocher tous les décochés

Voila !

shuss

11 février 2006 à 15:02:11

Désolé, autant pour moi

Là c'est encore plus simple

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function inverse()
{
var forme = document.getElementById('forme');
var check = forme.getElementsByTagName('input');//On récupère toutes les cases
var i;
for (i=0; i<check.length; i ++)//Et on vérifie pour chacune
{
if (check[i].checked)//.checked vaut true si la case est cochée, sinon false
{
check[i].checked = false;
}
else
{
check[i].checked = true;
}
}
}
</script>
</head>
<body>
<form id="forme">
<label><input type="checkbox" name="frites"/> Frites<br /></label>
<label><input type="checkbox" name="steak"/> Steak haché<br /></label>
<label><input type="checkbox" name="epinards"/> Epinards<br /></label>
<label><input type="checkbox" name="huitres"/> Huitres<br /></label>
</form>
<input type="button" onClick="javascript:inverse()" value="inverser" id="bouton" />
</body>
</html>

Je pense que les commentaires suffirons

thib1990

11 février 2006 à 15:50:29

Heu en fait je voudrais que c'est lorsqu'on clique sur une image au dessus des petits carrés que ces petits carrés s'inversent

Désolé mais ça je suis pas trop le javascript hein... :euh:

Reenjii

11 février 2006 à 15:57:00

Ben ce qu'il t'a donné, ca coche les cases qui ne le sont pas et sa décoche les cases qui le sont à l'appui du bouton "Inverser" !

C'est quoi le problème ? Sinon renseigne toi un peu sur le javascript

thib1990

11 février 2006 à 18:50:48

Heu en fait moi je voudrais une image à la place d'un bouton...

Pis en fait c'est vrai que je vais paraître un peu fénéant mais j'ai déjà 100 lignes de codes sur la page c'est pour ça j'ai pas envie de trop tout modifier et pis que plus rien marche... :euh:

Reenjii

11 février 2006 à 18:57:13

Ben tu fais une sauvegarde de l'etat actuel de ta page avant de modifier

Ca m'arrive souvent et c'est bien utile

Sinon, pour le bouton, c'est simple, tu peux faire un lien image ayant pour cible: javascript:inverse(); et le tour est joué !