CheckBox - Onclick/UnOnclick

Version imprimable

Coucou tous le mondes, merci de r�pondre au post :)

J'aurais besoin d'un petit coup de pouce, je suis pas du tout dou� en java script. :?

(j'ai beau eu chercher sur le forum j'ai pas trouv�, ou peut �tre un d�riv� mais alors j'ai pas compris la subtilit�.. j'ai d�j� trouv� des morceaux de code sur votre forum et essay� de les assembler mais ... �a fonctionne pas comme je le voudrais)

J'aimerais que mon texte en face de la checkbox apparaisse :
- en Vert si elle est coch�
- en Rouge si elle est d�coch�
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <script type="Text/JavaScript"> function Color(col) { document.getElementById("latin").style.color=col; document.getElementById("math").style.color=col; } /* javascript:Color('green') ?? */ </script> </head> <body> <br/><br/> <form id="texte" method="post" action="texte-ansi.php"> <input name="latin" type="checkbox" value="1" checked="checked" onclick="javascript:Color('red')"/>- <span id="latin">Latin</span><br/> <input name="math" type="checkbox" value="1" checked="checked" onclick="javascript:Color('red')"/>- <span id="math">Opérateur mathématiques</span><br/> </form> </body>
Merci beaucoup de votre aide, d�sol� si mon message n'est pas � la bonne place ou s'il existe d�j� un exemple sur le forum je voudrais bien quelques explications... :bug:

tu y �tais presque , c'est juste que tu ne fais pas de v�rification de l'�tat de tes checkbox :) :

je te met un exemple pour le premier ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="Text/JavaScript">
	function Color(MyCheckBox) {
if(MycheckBox.name == "latin")
{
if(MycheckBox.checked){
document.getElementById("latin").style.color= "green";
}
else{
document.getElementById("latin").style.color= "red";
}
}
 
	  }  
</script>
/*Coté html */
<input name="latin" type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="latin">Latin</span><br/>

22/02/2008, 16h55
Lokotamani

Coucou M'sieur le_chomeur, merci de me r�pondre ;)

j'ai essay� ton code mais je n'arrive pas � le faire fonctionner, je comprends le principe, j'ai, je pense tous les �l�ments, mais je n'arrive pas � le mettre en place... c'est frustrant d'avoir tous et de ne pouvoir tout assembler correctement :(

le_chomeur, dans ton code, Javascript confond le nom de la checkbox "latin" et le id du span "latin".
De plus, tu d�clares la variable argumentative MyCheckBox et non MycheckBox.

Code corrig� :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
<script type="Text/JavaScript">
 function Color(MycheckBox) {
if(MycheckBox.name == "chkbx")
{
if(MycheckBox.checked){
document.getElementById("latin").style.color= "green";
}
else{
document.getElementById("latin").style.color= "red";
}
}
 
   }  
</script>
<body onload="Color(document.getElementById('cla'))">
<input name="chkbx" id='cla' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="latin">Latin</span><br/>

Bonjour Sachav,

ton exemple fonctionne parfaitement :hola:

Il reste le probl�me que j'ai plusieurs checkbox, du coup comme tu peut en douter, les checkbox suivante n'agissent que sur la premi�re.

J'ai essay� diff�rent code � droite � gauche mais sans r�sultats favorable.
du genre:

Code:

<body onload="Color(document.getElementById('latin')('math')('nombre')('monaie')('exposant')('ponctuation')('espace'))">

L'�v�nement dans le body je le maitrise pas du tout.. :oops:

Voil� en gros ou j'en suis..

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
<html>
<head>
<script type="Text/JavaScript">
function Color(MycheckBox) {
	if(MycheckBox.name == "chkbx"){
		if(MycheckBox.checked)	{document.getElementById("latin").style.color= "green";}
		else					{document.getElementById("latin").style.color= "red";}
		}
	if(MycheckBox.name == "chkbx"){
		if(MycheckBox.checked)	{document.getElementById("math").style.color= "green";}
		else					{document.getElementById("math").style.color= "red";}
		}
	}  
	/* ect ... */
</script>
</head>
 
<body onload="Color(document.getElementById('latin')('math'))">
	<form id="texte" method="post" action="texte-ansi.php">
 
		<!-- 			<input name="chkbx" id='cla' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="latin">Latin</span><br/> -->
		<!-- name="latin" -->		<input name="chkbx" id='latin' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="latin">Latin</span><br/> 
		<!-- name="math" -->		<input name="chkbx" id='math' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="math">Opérateur mathématiques</span><br/>
		<!-- name="nombre" -->		<input name="chkbx"	id='nombre' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="nombre">Feuille de nombres</span><br/> 
		<!-- name="monaie" -->		<input name="chkbx"	id='monaie' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="monaie">Symbole monétaire</span><br/> 
		<!-- name="exposant" -->	<input name="chkbx"	id='exposant' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="exposant">Exposant indice</span><br/> 
		<!-- name="ponctuation" -->	<input name="chkbx" id='ponctuation' type="checkbox" value="1" checked="checked" onclick="Color(this)"/>- <span id="ponctuation">Ponctuation générale</span><br/> 
		<!-- name="espace" -->		<input name="chkbx"	id='espace' type="checkbox" value="1" 					 onclick="Color(this)"/>- <span id="latin">Prendre en compte les espaces</span><br/> 
 
		</form>
</body>

Merci encore de votre aide.

Edit: lien de la page...
http://www.be-and.info/mini-prog/texte-ansi.php

voici un script qui prend tous les cas de figure :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var idSpan = "txt_";     // masque des span (partie commune des id)
var idChk = "idchk_";    // masque des checkbox (partie commune des id)
 
var coul1 = "#0000FF";  // couleur si checkbox cochee
var coul2 = "#11AA44";  // couleur si checkbox pas cochee
 
function ChangeCouleur(chk)
{
    var expr = /\d+$/gi;   // expression reguliere  pour extraction de l indice du checkbox 
    var indice = chk.id.match(expr);  // on recupere l indice du chekbox
 
    var sp = document.getElementById(idSpan+indice);
 
    if (chk.checked)
        sp.style.color = coul1;
    else
        sp.style.color = coul2;
}
 
function initchk()
{
    var i;
    var tabChk = document.getElementsByTagName("input");
    var n = tabChk.length;
    var expr = new RegExp(idChk, "gi");
 
    for (i=0; i<n; i++)
    {
        if (tabChk[i].type.toLowerCase()=="checkbox" && expr.test(tabChk[i].id))
        {
            ChangeCouleur(tabChk[i]);
        }
        expr.test("");  // reinitialistion de l attribut lastIndex de la regexp (FF)
    }
}
 
 
//-->
</script>
 
 
</head>
 
<body onload="initchk()">
 
<div>
    <input type="checkbox" id="idchk_1" checked="checked" onclick="ChangeCouleur(this)" /> <span id="txt_1"> Texte 1 </span><br />
    <input type="checkbox" id="idchk_2" checked="checked" onclick="ChangeCouleur(this)" /> <span id="txt_2"> Texte 2 </span><br />
    <input type="checkbox" id="idchk_3" onclick="ChangeCouleur(this)" /> <span id="txt_3"> Texte 3 </span><br />
    <input type="checkbox" id="idchk_4" onclick="ChangeCouleur(this)" /> <span id="txt_4"> Texte 4 </span><br />
    <input type="checkbox" id="idchk_5" checked="checked" onclick="ChangeCouleur(this)" /> <span id="txt_5"> Texte 5 </span><br />
    <input type="checkbox" id="idchk_6856" onclick="ChangeCouleur(this)" /> <span id="txt_6856"> Texte 6 </span><br />
 
    <br />
    <br />
    <span>Checkbox non concernées par le script :<br /></span>
    <input type="checkbox" id="id_24" checked="checked" /> <span id="txt_24"> Texte 24 </span><br />
    <input type="checkbox" id="id_25" /> <span id="txt_25"> Texte 25 </span><br />
    <input type="checkbox" id="id_23" /> <span id="txt_23"> Texte 23 </span><br />
</div>
 
</body>
 
</html>

Les checkbox ont un id qui commence par idchk_ (variable idChk) et les span un id qui commence par txt_ (variable idSpan) suivis d'une valeur num�rique. Cette valeur num�rique est identique pour un couple (checkbox, span).

22/02/2008, 19h56
Lokotamani

Bonjour Auteur, et merci.:hola:

�a fonctionne parfaitement, c'est franchement nickel il n'y a rien � dire.:)

Merci tous le monde pour votre aide.

Page consern�
22/02/2008, 23h24
le_chomeur

juste pour justification , je m'excuse j'ai donn� ce code , tap� en live ... :oops::oops:
07/06/2008, 15h47
larleuch

Salut ce post m'interesse beaucoup! j'ai un probl�me similaire mais avec une variante:

Pour une question: 5 choix possibles (5 checkbox)
pour chaque checkbox:
>si elle est coch�e alors qu'il fallait la cocher ->juste
>si elle est coch�e alors qu'il fallait laisser vide ->faux
>si elle n'est pas coch�e et qu'il fallait laisser vide ->juste
>si elle n'est pas coch�e et qu'il fallait la cocher -> faux

Je voudrais apr�s la validation que chaque proposition r�pondue avec une erreur soit affich�e en rouge et pour les bonnes r�ponses en vert.

mon code v�rifie les r�ponses et attribu une r�ponse juste comme �a:

Citation:

ShouldBeChecked = (I[QNum][3][ANum][2] == 1);
if (ShouldBeChecked == CheckBox.checked){
Matches++;
}

Citation:

<li class="Quiz" id="Q_0" style="display: none;">
<div class="QuestionText">Cochez les bonnes propositions.</div><ol class="MSelAnswers">
<li id="Q_0_0">
<form method="post" action="" onsubmit="return false;">
<div>
<input type="checkbox" id="Q_0_0_Chk" class="MSelCheckbox" />Proposition 1
</div>
</form>
</li>
...

Est-ce que vous avez une id�e de comment je pourrai faire pour la couleur? Ou bien pour afficher une croix rouge devant les erreurs... Merci!

voici un exemple :

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
 
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var idSpan = "txt_";     // masque des span (partie commune des id)
var idChk = "chk_";    // masque des checkbox (partie commune des id)
 
var coulFaux = "#FF0000";  // couleur si faux
var coulJuste = "#11AA44";  // couleur si juste
 
 
function Valider(btnQ)
{
  var i, objChk, objSpan;
  
  var adrSpan = idSpan + btnQ + "_"; // contruction de la base des id des span
  var adrChk = idChk + btnQ + "_"; // contruction de la base des id des checkboxes
   
  var tabRep = document.getElementById("reponse_"+btnQ).value;  // tableau des réponses
  
  for (i=1; i<=5; i++)
  {
    objChk = document.getElementById(adrChk + i);
    objSpan = document.getElementById(adrSpan + i);
       
    if (objChk.checked && tabRep.charAt(i-1)=="1")
        objSpan.style.color = coulJuste;
        
    if (!objChk.checked && tabRep.charAt(i-1)=="1")
        objSpan.style.color = coulFaux;
        
    if (!objChk.checked && tabRep.charAt(i-1)=="0")
        objSpan.style.color = coulJuste; 
        
    if (objChk.checked && tabRep.charAt(i-1)=="0")
        objSpan.style.color = coulFaux;        
  }
 
}
 
 
//-->
</script>
 
 
</head>
 
<body>
 
<div>
    <h3>Question 1</h3>
    <input type="checkbox" id="chk_1_1" /> <span id="txt_1_1"> Choix 1 </span><br />
    <input type="checkbox" id="chk_1_2" /> <span id="txt_1_2"> Choix 2 </span><br />
    <input type="checkbox" id="chk_1_3" /> <span id="txt_1_3"> Choix 3 </span><br />
    <input type="checkbox" id="chk_1_4" /> <span id="txt_1_4"> Choix 4 </span><br />
    <input type="checkbox" id="chk_1_5" /> <span id="txt_1_5"> Choix 5 </span><br /><br />
    <input type="hidden" id="reponse_1" value="00110" /> 
    <input type="button" value="Valider" onclick="Valider('1')" />
 
    <br /><br /><br />
 
    <h3>Question 2</h3>
    <input type="checkbox" id="chk_2_1" /> <span id="txt_2_1"> Choix 1 </span><br />
    <input type="checkbox" id="chk_2_2" /> <span id="txt_2_2"> Choix 2 </span><br />
    <input type="checkbox" id="chk_2_3" /> <span id="txt_2_3"> Choix 3 </span><br />
    <input type="checkbox" id="chk_2_4" /> <span id="txt_2_4"> Choix 4 </span><br />
    <input type="checkbox" id="chk_2_5" /> <span id="txt_2_5"> Choix 5 </span><br /><br />
    <input type="hidden" id="reponse_2" value="11000" />     
    <input type="button" value="Valider" onclick="Valider('2')" />
 
</div>
 
</body>
 
</html>

les id, pour une question N :

les cases � cocher :
chk_N_1 ; chk_N_2 ; chk_N_3 ; chk_N_4 ; chk_N_5 ;
les textes :
txt_N_1 ; txt_N_2 ; txt_N_3 ; txt_N_4 ; txt_N_5 ;
le champ hidden qui contient les r�ponses :
reponse_N
1 => la case doit �tre coch�e
0 => la case ne doit pas �tre coch�e
C'est une s�rie de cinq 0 ou 1.
la fonction Valider('N') prend le num�ro de la question comme argument.