Petit soucis de case à cocher

Version imprimable

Bonjour à tous

J'ai besoin d'un tout petit script php/javascript pour pouvoir afficher un bouton de confirmation uniquement si la case est coché.

J'ai écris ca :

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
 
<script type="text/javascript">
 
    function changeDisplay(Case)
        {
        var Coche = document.getElementById(Case).checked;
 
        if(Coche == true)
            {
            document.getElementById("calque").style.display = block;
            }
        else if(Coche == false)
            {
            document.getElementById("calque").style.display = none;
            }
        }
 
</script>
 
<p>Bonjour</p>
 
<div id="calque" style="border: 1px solid red; width: 170px;">
    <p style="text-align: center;">Ce bloc peut être caché</p>
</div>
 
<p><input type="checkbox" id="Case" name="case_a_cocher" onClick="changeDisplay(this.id)">J'accepte les conditions d'utilisation</p>

Mais ca ne fonctionne pas.

Quelqu'un aurait-il une idée de pourquoi ça ne fonctionne pas ?

Merci à tous

30/04/2010, 16h31
Bullit84

C'est bon j'ai trouvé mon erreur ^^

Petite erreur très bête, j'avais juste oublié les quote autour de display et none

Merci la console d'erreur de Firefox

J'ai encore un petit soucis

Je voudrais que ma <div> que l'on peut cacher soit masquée par defaut

J'ai donc rajouté ca dont mon code mais ca ne marche pas ...

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
 
<script type="text/javascript">
 
    function changeDisplay(Case)
        {
        var Coche = document.getElementById(Case).checked;
 
        if(Coche == true)
            {
            document.getElementById("calque").style.display = 'block';
            }
        else if(Coche == false)
            {
            document.getElementById("calque").style.display = 'none';
            }
        }
 
</script>
 
<p>Bonjour</p>
 
<div id="calque" style="border: 1px solid red; width: 170px;">
    <p style="text-align: center;">Ce bloc peut être caché</p>
</div>
 
<p>
    <input type="checkbox" id="Case" name="case_a_cocher" onLoad = "changeDisplay(this.id)" onClick="changeDisplay(this.id)">J'accepte les conditions d'utilisation
</p>

30/04/2010, 16h54
dede94

et si tu met visibility: hidden dans ton div?
30/04/2010, 17h02
Bullit84

Non ca me la rend invisible tout le temps
30/04/2010, 17h35
E.Bzz

Bonjour,
il faut éviter de donner à une variable un nom correspondant à l'id d'un objet de la page (notamment pour IE).
Essaye soit de changer l'id (il peut être égal au name), soit de changer le nom du paramètre de la fonction (ex : la_case).

Sinon, le reste semble correct.

... à part le onload qui devrait être dans la balise <body> (pas d'onload sur un input), mais qui de toutes façons ne sert à rien : il suffit de masquer le div avec le CSS lors de la génération de la page sur le serveur ;)
Et la partie <script> qu'il faut placer dans le <head>.

A+

Merci à tous

Voilà la version qui fonctionne

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
 
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Test de bouton cachés</title>
        <script type="text/javascript">
 
        function changeDisplay(Case)
            {
            var Coche = document.getElementById(Case).checked;
 
            if(Coche == true)
                {
                document.getElementById("calque").style.display = 'block';
                }
            else if(Coche == false)
                {
                document.getElementById("calque").style.display = 'none';
                }
            }
        </script>
 
    </head>
    <body onLoad="changeDisplay('ma_case');">
        <div id="calque">
            <h2>Bonjour</h2>
            <input type="submit" value="Valider"><input type="reset" value="Effacer">
        </div>
 
        <br />
 
        <input type="checkbox" id="ma_case" name="ma_case" onClick="changeDisplay(this.id)">J'accepte les conditions d'utilisation
    </body>
</html>