IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

checkbox avec autre style css


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 35
    Par défaut checkbox avec autre style css
    Bonjour a tous

    Je suis en train de faire un formulaire de commentaire type allociné avec un système d'étoiles. mes étoiles sont des checkbox dont j'ai modifié le css mais seulement quand je clique sur une étoile celle ci change bien de couleur mais la checkbox associée ne se coche pas....

    Voici mon code:

    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
    108
    109
    110
    111
    112
     
    <html>
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
     
     
    <head>
     
     
    <style type='text/css'>
    label.checkbox_checked {
    	background: white url('StarOver.gif') no-repeat;	
    	padding: 25px 25px 25px 25px;
    	font-family:verdana;
    	font:20px;
    	display: block;
    	margin:  0px;
     
     
     
    }
    label.checkbox_unchecked  {
    	background: white url('StarOut.gif') no-repeat;	
    	padding: 25px 25px 25px 25px;
    	font-family:verdana;
    	font:20px;
    	display: block;
    	margin:  0px ;
     
    }
    </style>
     
    <script>
     
    function Warp(obj){
     
     
    	obj.className=(obj.className=='checkbox_checked')?'checkbox_checked':'checkbox_checked';
     
    	mycheck=document.getElementById('checkbox_1')
    	mycheck.checked=!mycheck.checked
     
     
    }
    function Warped(obj){
     
     
    	obj.className=(obj.className=='checkbox_unchecked')?'checkbox_unchecked':'checkbox_unchecked';
     
    	mycheck=document.getElementById('checkbox_1')
    	mycheck.checked=!mycheck.checked
     
     
    }
     
    </script>
     
    </head>
     
     
     
    <body>
     
     
    <form name="form" action="resultat.php"  method="post">
     
     
     
    <table>
    <tr>
    <?for ($i=0;$i<10;$i++){?>
    <td><label  id="label_<?echo $i;?>" class="checkbox_unchecked" onclick="
    <? 
     
    for ($j=0;$j<($i+1);$j++){
     
     
    ?>
    Warp(label_<?echo $j;?>)
     
    <?
    }
    for ($j=$i+1;$j<10;$j++){
     
    ?>
    Warped(label_<?echo $j;?>)
    <?
    }
    ?>
    "></label>
    checkbox<?echo $i+1;?>:<input name="checkbox<?echo $i+1;?>" id="checkbox_1" type="checkbox" /></td>
    <?}
     
    //style='z-index:10;visibility:hidden;'
    ?>
    </tr></table>
     
     
     
     
    <table><tr><td>
    Commentaires: </td><td><TEXTAREA rows="3" name="commentaires">
    Tapez ici vos commentaires</TEXTAREA></td></tr></table>
     
    <br><input type='submit' value='poster'>
    </form>
    </body>
     
     
     
    </html>
    en réalité c'est mon
    mycheck=document.getElementById('checkbox_1')
    mycheck.checked=!mycheck.checked qui ne marchent pas mais je ne comprend pas pourquoi...

  2. #2
    Membre expérimenté
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    254
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2007
    Messages : 254
    Par défaut
    Essaie cette solution moins elégante:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    if(mycheck.checked)
      mycheck.checked = false;
    else
      mycheck.checked = true;

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 35
    Par défaut
    merci mais ca ne marche pas non plus, ca revient au même que ce que j'ai fais...

    édit: j'ai trouvé tout seul, pour ceux que ca interesse j'utilise un document.forms.form.checkbox.checked = true ou false pour les coché ou non...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. checkbox avec éléments style visible hidden et PHP
    Par rvm31 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 11/01/2013, 15h48
  2. [CKEditor] problèmes avec mes styles css
    Par e.maquair dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 20/08/2007, 00h01
  3. probleme style peek a boo avec JS et CSS
    Par very dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 01/09/2006, 19h49
  4. Réponses: 1
    Dernier message: 30/11/2005, 14h57
  5. Problème de mise en page avec feuille de style css
    Par leroivert dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/11/2005, 09h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo