[JS] Décocher Checkbox

Version imprimable

Bonjour, j'aimerai décocher certains checkbox mais comment faire ?

Code:

1
2
3
4
5
6
7
8
9
10
11
 
					  for (en=0; en < document.oForm.elements.length; en++)
					  {
							 if ( ( document.oForm.elements[en].type != 'submit' ) && ( document.oForm.elements[en].type != 'reset' ) )
							 {
								if(document.getElementById(document.oForm.elements[en].name).checked)
								{
									document.getElementById(document.oForm.elements[en].name).checked = null;						
								}	
							 }
					  }

pourquoi mes checkbox sélectionné ne sont pas décoché ?

ps: si je fais un clique gauche avec ma souris sa fonctionne 8O !

22/03/2010, 19h13
yacine.dev

esseye

Code:

document.getElementById(document.oForm.elements[en].name).checked =false;
22/03/2010, 19h51
noobyyy

pareil :calim2:
22/03/2010, 20h32
SpaceFrog

Code:

document.getElementById(document.oForm.elements[en].name)

??????
ById ou ByName ???

on peut voir le html concerné ?
23/03/2010, 06h48
andry.aime
Bonjour,

Citation:

on peut voir le html concerné ?

+1
J'imagine bien que tu utilises les mêmes valeurs pour les attributs name et id, tu auras des problèmes avec IE si c'est le cas.
Code:

1 2 3 4 5 6 7 for (var en=0; en < document.oForm.elements.length; en++) { if ( document.oForm.elements[en].type == 'checkbox') { document.oForm.elements[en].checked = false; } }

je génère une liste de checkbox à partir de noms de ma base de données. Ainsi chaque noms s'affichent coché ou non.

Je suis à l'étape de la suppression de tous ce qui est coché et pour cela j'aimerai en javascript mettre tous mes checkbox à false.

Mais ça ne fonctionne pas directement, c'est à dire que lorsque sa effectue le checked = false, rien ne change en revanche juste après si je clique sur le bouton gauche ça les enlève.

Suite à vos messages j'ai cru comprendre que mon erreur était à cause de mes noms d'id et de mes names. Effectivement j'ai les mêmes noms.

si j'ai écris:
Code:

1 2 document.getElementById(document.oForm.elements[en].name)
c'est parce que je ne connais pas à l'avance le nom de l'id qui va apparaitre et c'est la seule solution que j'ai eu. Comment j'aurai pu faire pour avoir le nom de l'id en cours ?

solutions:

comment faire pour corriger mes erreurs ?

Différencier le nom et les id ?

Mon code qui me permet de savoir ce que j'ai coché pour ensuite l'insérer dans la base de données:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 noms_link = ""; nb_link = 0; for (en=0; en < document.oForm.elements.length; en++) { if ( ( document.oForm.elements[en].type != 'submit' ) && ( document.oForm.elements[en].type != 'reset' ) ) { if(document.getElementById(document.oForm.elements[en].name).checked) { noms_link = noms_link + document.oForm.elements[en].name + ":"; nb_link = nb_link + 1; } } }
c'est mieux de bosser avec name ou id ?

23/03/2010, 13h16
SpaceFrog

ça ne nous donne toujours pas le html des éléments ..
23/03/2010, 13h21
andry.aime

+1 SpaceFrog
As-tu testé le code proposé sans utiliser les name et id?

j'ai enlevé les ID mais c'est mieux de garder id ou name ?

voici une html après la requête:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<form method="post" id="oForm" name="oForm">
<div align="center">
<table>
<tr>
<td class="moitie">
<input class="styled" name="allocine" type="checkbox" value="1"  />Allocine<br />
</td>
<td class="moitie">
<input class="styled" name="blogger" type="checkbox" value="1"  />Blogger<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="dailymotion" type="checkbox" value="1"  />Dailymotion<br />
 
</td>
<td class="moitie">
<input class="styled" name="deezer" type="checkbox" value="1"  />Deezer<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="developpez" type="checkbox" value="1"  />Developpez<br />
</td>
<td class="moitie">
<input class="styled" name="deviantart" type="checkbox" value="1"  />Deviantart<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="ebay" type="checkbox" value="1"  />Ebay<br />
 
</td>
<td class="moitie">
<input class="styled" name="equipe" type="checkbox" value="1"  />Equipe<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="facebook" type="checkbox" value="1"  />Facebook<br />
</td>
<td class="moitie">
<input class="styled" name="flickr" type="checkbox" value="1"  />Flickr<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="google" type="checkbox" value="1"  />Google<br />
 
</td>
<td class="moitie">
<input class="styled" name="lastfm" type="checkbox" value="1"  />Lastfm<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="linkedin" type="checkbox" value="1"  />Linkedin<br />
</td>
<td class="moitie">
<input class="styled" name="myspace" type="checkbox" value="1"  />Myspace<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="netvibes" type="checkbox" value="1"  />Netvibes<br />
 
</td>
<td class="moitie">
<input class="styled" name="skyblog" type="checkbox" value="1"  />Skyblog<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="topchretien" type="checkbox" value="1"  />Topchretien<br />
</td>
<td class="moitie">
<input class="styled" name="twitter" type="checkbox" value="1"  />Twitter<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="vingtminutes" type="checkbox" value="1"  />Vingtminutes<br />
 
</td>
<td class="moitie">
<input class="styled" name="weather" type="checkbox" value="1"  />Weather<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="wikipedia" type="checkbox" value="1"  />Wikipedia<br />
</td>
<td class="moitie">
<input class="styled" name="youtube" type="checkbox" value="1"  />Youtube<br />
</td>
</tr></table>
</div>

:sm:
J'ai utilisé mon code avec le tien et ça marche. Tu n'arrètes pas de poser des questions sans même nous répondre ni d'essayer les propositions :massacre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<script type="text/javascript">
function acc()
{
 for (var en=0; en < document.oForm.elements.length; en++)
  {
 if ( document.oForm.elements[en].type == 'checkbox')
   {
   document.oForm.elements[en].checked = false; 
   }
  }
}
</script>
</head>
<body>
<input type="button" onclick="acc()" value="Decocher"/>
<form method="post" id="oForm" name="oForm">
<div align="center">
<table>
<tr>
<td class="moitie">
<input class="styled" name="allocine" type="checkbox" value="1"  />Allocine<br />
</td>
<td class="moitie">
<input class="styled" name="blogger" type="checkbox" value="1"  />Blogger<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="dailymotion" type="checkbox" value="1"  />Dailymotion<br />
 
</td>
<td class="moitie">
<input class="styled" name="deezer" type="checkbox" value="1"  />Deezer<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="developpez" type="checkbox" value="1"  />Developpez<br />
</td>
<td class="moitie">
<input class="styled" name="deviantart" type="checkbox" value="1"  />Deviantart<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="ebay" type="checkbox" value="1"  />Ebay<br />
 
</td>
<td class="moitie">
<input class="styled" name="equipe" type="checkbox" value="1"  />Equipe<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="facebook" type="checkbox" value="1"  />Facebook<br />
</td>
<td class="moitie">
<input class="styled" name="flickr" type="checkbox" value="1"  />Flickr<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="google" type="checkbox" value="1"  />Google<br />
 
</td>
<td class="moitie">
<input class="styled" name="lastfm" type="checkbox" value="1"  />Lastfm<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="linkedin" type="checkbox" value="1"  />Linkedin<br />
</td>
<td class="moitie">
<input class="styled" name="myspace" type="checkbox" value="1"  />Myspace<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="netvibes" type="checkbox" value="1"  />Netvibes<br />
 
</td>
<td class="moitie">
<input class="styled" name="skyblog" type="checkbox" value="1"  />Skyblog<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="topchretien" type="checkbox" value="1"  />Topchretien<br />
</td>
<td class="moitie">
<input class="styled" name="twitter" type="checkbox" value="1"  />Twitter<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="vingtminutes" type="checkbox" value="1"  />Vingtminutes<br />
 
</td>
<td class="moitie">
<input class="styled" name="weather" type="checkbox" value="1"  />Weather<br />
</td>
</tr><tr>
<td class="moitie">
<input class="styled" name="wikipedia" type="checkbox" value="1"  />Wikipedia<br />
</td>
<td class="moitie">
<input class="styled" name="youtube" type="checkbox" value="1"  />Youtube<br />
</td>
</tr></table>
</div>
</form>
</body>
</html>

23/03/2010, 14h07
noobyyy

tu as testé avec un onclick moi j'utilise pas le onclick !

donc oui ça marche mais non dans mon cas.
23/03/2010, 14h13
SpaceFrog

ben tu veux le lancer sur quel evenement ??
23/03/2010, 14h20
noobyyy

justement SpaceFrog j'essaye de comprendre pourquoi ça fonctionne avec un bouton ( donc on click dessus [onclick] ) et non avec un code dans une fonction.

j'ai une fonction test() que j'effectue pour envoyer mes informations vers ma base de données en ajax.

c'est dans cette fonction que j'aimerai mettre mes checkbox à false sans passer par l'évènement click.

Est-ce qu'on est obligé de passer par un évènement onclick ?
23/03/2010, 14h23
SpaceFrog

non passe pas le onsubmit du for ou par le lancement de ta fonction ajax ?..
23/03/2010, 14h24
andry.aime

Citation:

j'ai une fonction test() que j'effectue pour envoyer mes informations vers ma base de données en ajax.

Difficile de t'aider car tu nous caches les codes concérnés.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function social_delete()
{
		result = confirm('Désirez-vous supprimer l\'option "liens" de votre compte ?');
 
		if(result == true)
		{		
			var xhr   = getXMLHttpRequest();	
 
			xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			//-----		
				var tabReponse = xhr.responseText.split(";");	
				if (tabReponse[0].split("=")[1] == "0")   // Contient le code retour, ici "0"
				{
					// Affiche le message d'erreur
					alert(tabReponse[1]);
					document.getElementById("loader4").style.display = "none";
					input_invalide(tabReponse[2], 'maj8');
				}
				else
					{
 
						//--
 
					// FONCTIONNE PAS	
 
					for (var en=0; en < document.oForm.elements.length; en++)
					  {
						if ( document.oForm.elements[en].type == 'checkbox')
							 {
								document.oForm.elements[en].checked = false;	
							 }
					  }
 
 
						document.getElementById("loader4").style.display = "none";
						document.getElementById("maj7").style.display = "inline";
						setTimeout("img_valide('maj7')",5000);
					}	
			//-----
			} 
			else if (xhr.readyState < 4) {
						document.getElementById("loader4").style.display = "inline";
					}
			};	
 
			xhr.open("POST","test.php",true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');			
			//-----------			
			xhr.send("this_suppr="+result); 
		}
}

marche
Code:

1 2 3 4 5 for (var en=0; en < document.oForm.elements.length; en++) { document.oForm.elements[en].checked = false; }
marche pas
Code:

1 2 3 4 5 6 7 8 for (var en=0; en < document.oForm.elements.length; en++) { if ( document.oForm.elements[en].type == 'checkbox' ) { document.oForm.elements[en].checked = false; } }
j'ai reftifié mes erreurs sur les autres fonctions. mais même si maintenant ça marche je ne comprends pas trop pourquoi.

23/03/2010, 16h53
yacine.dev

Bonjour, vérifie si il entre dans le if ( document.oForm.elements[en].type == 'checkbox' )

A+
23/03/2010, 16h58
SpaceFrog

Code:

if ( document.oForm.elements[en].type.toLowerCase() == 'checkbox' )

??

en faite ça fonctionne pas ça actualise la page donc forcément... les checkbox ne sont pas coché :cry:
Code:

1 2 3 4 5 6 7 8 9 10 11 for (var en=0; en < document.oForm.elements.length; en++) { if ( document.oForm.elements[en].type.toLowerCase() == 'checkbox' ) { if(document.oForm.elements[en].checked) { alert('test'); } } }
l'alert s'affiche correctement ! cependant ça change pas les checkbox

23/03/2010, 21h50
noobyyy

comment faire une fonction qui ferai un reset d'un formulaire ?

Re,

Citation:

comment faire une fonction qui ferai un reset d'un formulaire ?

Code:

document.oForm.reset();

Citation:

l'alert s'affiche correctement ! cependant ça change pas les checkbox

Parceque tu ne le décoches pas,

Code:

1
2
3
4
5
6
7
8
9
10
11
for (var en=0; en < document.oForm.elements.length; en++)
                    {
                     if ( document.oForm.elements[en].type.toLowerCase() == 'checkbox' )
                     {
                       if(document.oForm.elements[en].checked)
                       {
                        alert('test');
document.oForm.elements[en].checked = false;
   }
                     }
                    }

25/03/2010, 21h15
noobyyy

je sais que ce code marche très bien mais malheureusement sur ma page non, peut etre qu'il y a quelques choses qui cloche.

Merci pour vos messages