CheckBox - Onclick/UnOnclick

**Lokotamani** · 22/02/2008, 05h30

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 :

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
<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...

**le_chomeur** · 22/02/2008, 08h46

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 :

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
 
<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/>

**Lokotamani** · 22/02/2008, 16h55

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

**sachav** · 22/02/2008, 17h11

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 :

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
 
 
<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/>

**Lokotamani** · 22/02/2008, 18h05

Bonjour Sachav,

ton exemple fonctionne parfaitement

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 :

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

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

L'évènement dans le body je le maitrise pas du tout..

Voilà en gros ou j'en suis..

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

**Auteur** · 22/02/2008, 19h04

voici un script qui prend tous les cas de figure :

Code html :

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
 
<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).

**Lokotamani** · 22/02/2008, 19h56

Bonjour Auteur, et merci.

Ça fonctionne parfaitement, c'est franchement nickel il n'y a rien à dire.

Merci tous le monde pour votre aide.

Page conserné

**le_chomeur** · 22/02/2008, 23h24

juste pour justification , je m'excuse j'ai donné ce code , tapé en live ...

**larleuch** · 07/06/2008, 15h47

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:

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

<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!

**Auteur** · 08/06/2008, 17h23

voici un exemple :

Code html :

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
 
 
<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.

CheckBox - Onclick/UnOnclick

JavaScript

Discussions similaires

Partager

Partager