[JS] Décocher Checkbox

**noobyyy** · 22/03/2010, 18h00

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

!

**yacine.dev** · 22/03/2010, 19h13

esseye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(document.oForm.elements[en].name).checked  =false;

**noobyyy** · 22/03/2010, 19h51

pareil

**SpaceFrog** · 22/03/2010, 20h32

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

on peut voir le html concerné ?

**andry.aime** · 23/03/2010, 06h48

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;	
		 }
  }

**noobyyy** · 23/03/2010, 13h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 23/03/2010, 13h16

ça ne nous donne toujours pas le html des éléments ..

**andry.aime** · 23/03/2010, 13h21

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

**noobyyy** · 23/03/2010, 13h35

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

voici une html après la requête:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**andry.aime** · 23/03/2010, 14h00

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**noobyyy** · 23/03/2010, 14h07

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

donc oui ça marche mais non dans mon cas.

**SpaceFrog** · 23/03/2010, 14h13

ben tu veux le lancer sur quel evenement ??

**noobyyy** · 23/03/2010, 14h20

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 ?

**SpaceFrog** · 23/03/2010, 14h23

non passe pas le onsubmit du for ou par le lancement de ta fonction ajax ?..

**andry.aime** · 23/03/2010, 14h24

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.

**noobyyy** · 23/03/2010, 14h28

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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); 
		}
}

**noobyyy** · 23/03/2010, 16h10

marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

marche pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**yacine.dev** · 23/03/2010, 16h53

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

A+

**SpaceFrog** · 23/03/2010, 16h58

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

??

**noobyyy** · 23/03/2010, 20h30

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[JS] Décocher Checkbox

JavaScript

Discussions similaires

Partager

Partager