Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2964 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Compter les cases cochées ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Compter les cases cochées ?

n°2057696
KoRni
Vision analogique
Posté le 18-02-2011 à 10:43:11  profilanswer
 

Bonjour à tous, je suis entrain de concevoir un site qui va me permettre de vendre ma collection de DVD. Vu que je n'ai vraiment pas beaucoup d'expérience dans le domaine, j'aurais quelques questions à vous poser.  
 
Ce que je voudrais faire, c'est une page listant tous mes DVD avec leur pochette respective et en dessous de chaque pochette, une case à cocher. Jusque là, pas de problème. Là où ça se corse, c'est que je voudrais pouvoir faire comme une sorte de compteur qui va compter le nombre de cases à cocher qui sont cochées sur la page. Donc dès que quelqu'un clique sur soit l'image, soit directement la case à cocher correspondante, cela ajoute 1 dans un petit encart à part au nombre de DVD déjà cochés. Et là je n'ai aucune idée de comment procéder, ni même où chercher.  
 
Voilà le brouillon de la page :
 
http://www.megaupload.com/?d=0A4STSMS
 
Merci d'avance pour vos éclaircissements :jap:


---------------
Signature Loading...
mood
Publicité
Posté le 18-02-2011 à 10:43:11  profilanswer
 

n°2057707
gelatine_v​elue
Posté le 18-02-2011 à 10:55:55  profilanswer
 

Sur le onclick de la case à cocher, appelle une fonction javascript, comme ceci:
<input type="checkbox" onClick="javascript:cpt++; return false;"/>
 
cpt étant une variable globale.

n°2057712
KoRni
Vision analogique
Posté le 18-02-2011 à 11:08:12  profilanswer
 

Merci mais c'est pas assez développé pour mon niveau de débutant : je ne vois pas de onclick sur les cases à cocher et je sais pas comment où s'ajoute dans le code :??:
 
Ensuite, comment est-ce que cette ligne javascript va ajouter 1 où je veux sur la page ?


---------------
Signature Loading...
n°2057722
gelatine_v​elue
Posté le 18-02-2011 à 11:28:04  profilanswer
 

KoRni a écrit :

Merci mais c'est pas assez développé pour mon niveau de débutant : je ne vois pas de onclick sur les cases à cocher et je sais pas comment où s'ajoute dans le code :??:

 

Ensuite, comment est-ce que cette ligne javascript va ajouter 1 où je veux sur la page ?

 


Remplace ton index.html par ça et ton monde s'éclairera. Je te laisse voir les modifs que j'ai faites. (protip: clique sur l'icone "voir le bbcode" pour pouvoir copier coller sans les n° de lignes).
edit: je me rends compte que j'ai fait des copier collés de porc qui font que tous les input ont le même id, en plus contenant des espaces.

 
Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .Arial-DVDs {
  9.     font-family: Arial, Helvetica, sans-serif;
  10.     font-size: 13px;
  11. }
  12. -->
  13. </style>
  14. <script src="../SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
  15. <link href="../SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
  16. </head>
  17. <script>
  18. cpt = 0;
  19. compteur = function(input)
  20. {
  21.     if (input.checked)
  22.     {
  23.         cpt++;
  24.     }
  25.     else
  26.     {
  27.         cpt--;
  28.     }
  29.     document.getElementById("compteurAff" ).innerHTML = cpt;
  30. }
  31. </script>
  32. <body class="Arial-DVDs">
  33. <div align="center">
  34. Nombre de machins cochés : <span id="compteurAff"></span>
  35.   <table width="950" border="0" align="center" cellpadding="0">
  36.     <tr valign="top">
  37.       <td width="190"><div align="center">
  38.         <p><img src="../images/12angrymen.jpg" width="115" height="115" /></p>
  39.         <p>12 Angry Men<br />
  40.         12 Hommes en Colère
  41.         </p>
  42.           <span id="sprycheckbox1">
  43.             <label>
  44.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  45.             </label>
  46.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  47.           </span>
  48.       </div></td>
  49.       <td width="190"><div align="center">
  50.         <p><img src="../images/12monkeys.jpg" width="115" height="115" /></p>
  51.         <p>12 Monkeys<br />
  52.           L'Armée des 12 Singes
  53.         </p>
  54.                   <span id="sprycheckbox1">
  55.             <label>
  56.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  57.             </label>
  58.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  59.           </span>
  60.       </div></td>
  61.       <td width="190"><div align="center">
  62.         <p><img src="../images/24.jpg" width="115" height="115" /></p>
  63.         <p>24 Season 3<br />
  64.           24 Heures Chrono
  65.         </p>
  66.                   <span id="sprycheckbox1">
  67.             <label>
  68.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  69.             </label>
  70.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  71.           </span>
  72.       </div></td>
  73.       <td width="190"><div align="center">
  74.         <p><img src="../images/albinoalligator.jpg" width="115" height="115" /></p>
  75.         <p>Albino Alligator</p>
  76.                   <span id="sprycheckbox1">
  77.             <label>
  78.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  79.             </label>
  80.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  81.           </span>
  82.       </div></td>
  83.       <td width="190"><div align="center">
  84.         <p><img src="../images/aliens.jpg" width="115" height="115" /></p>
  85.         <p>Aliens</p>
  86.                   <span id="sprycheckbox1">
  87.             <label>
  88.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  89.             </label>
  90.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  91.           </span>
  92.       </div></td>
  93.     </tr>
  94.     <tr valign="top">
  95.       <td width="190"><div align="center">
  96.         <p><img src="../images/alifelessordinary.jpg" width="115" height="115" /></p>
  97.         <p>A Life Less Ordinary<br />
  98.           Une Vie Moins Ordinaire
  99.         </p>
  100.                   <span id="sprycheckbox1">
  101.             <label>
  102.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  103.             </label>
  104.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  105.           </span>
  106.       </div></td>
  107.       <td width="190"><div align="center">
  108.         <p><img src="../images/americanbeauty.jpg" width="115" height="115" /></p>
  109.         <p>American Beauty</p>
  110.                   <span id="sprycheckbox1">
  111.             <label>
  112.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  113.             </label>
  114.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  115.           </span>
  116.       </div></td>
  117.       <td width="190"><div align="center">
  118.         <p><img src="../images/americangangster.jpg" width="115" height="115" /></p>
  119.         <p>American Gangster</p>
  120.                   <span id="sprycheckbox1">
  121.             <label>
  122.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  123.             </label>
  124.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  125.           </span>
  126.       </div></td>
  127.       <td width="190"><div align="center">
  128.         <p><img src="../images/badsanta.jpg" width="115" height="115" /></p>
  129.         <p>Bad Santa</p>
  130.                   <span id="sprycheckbox1">
  131.             <label>
  132.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  133.             </label>
  134.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  135.           </span>
  136.       </div></td>
  137.       <td width="190"><div align="center">
  138.         <p><img src="../images/bandits.jpg" width="115" height="115" /></p>
  139.         <p>Bandits</p>
  140.                   <span id="sprycheckbox1">
  141.             <label>
  142.               <input type="checkbox" onClick="javascript:compteur(this);"  name="Selection du DVD" id="Selection du DVD" />
  143.             </label>
  144.             <span class="checkboxRequiredMsg">Please make a selection.</span>
  145.           </span>
  146.       </div></td>
  147.     </tr>
  148.     <tr>
  149.       <td width="190"><div align="center"></div></td>
  150.       <td width="190"><div align="center"></div></td>
  151.       <td width="190"><div align="center"></div></td>
  152.       <td width="190"><div align="center"></div></td>
  153.       <td width="190"><div align="center"></div></td>
  154.     </tr>
  155.     <tr>
  156.       <td width="190"><div align="center"></div></td>
  157.       <td width="190"><div align="center"></div></td>
  158.       <td width="190"><div align="center"></div></td>
  159.       <td width="190"><div align="center"></div></td>
  160.       <td width="190"><div align="center"></div></td>
  161.     </tr>
  162.     <tr>
  163.       <td width="190"><div align="center"></div></td>
  164.       <td width="190"><div align="center"></div></td>
  165.       <td width="190"><div align="center"></div></td>
  166.       <td width="190"><div align="center"></div></td>
  167.       <td width="190"><div align="center"></div></td>
  168.     </tr>
  169.     <tr>
  170.       <td width="190"><div align="center"></div></td>
  171.       <td width="190"><div align="center"></div></td>
  172.       <td width="190"><div align="center"></div></td>
  173.       <td width="190"><div align="center"></div></td>
  174.       <td width="190"><div align="center"></div></td>
  175.     </tr>
  176.     <tr>
  177.       <td width="190"><div align="center"></div></td>
  178.       <td width="190"><div align="center"></div></td>
  179.       <td width="190"><div align="center"></div></td>
  180.       <td width="190"><div align="center"></div></td>
  181.       <td width="190"><div align="center"></div></td>
  182.     </tr>
  183.     <tr>
  184.       <td width="190"><div align="center"></div></td>
  185.       <td width="190"><div align="center"></div></td>
  186.       <td width="190"><div align="center"></div></td>
  187.       <td width="190"><div align="center"></div></td>
  188.       <td width="190"><div align="center"></div></td>
  189.     </tr>
  190.   </table>
  191. </div>
  192. <script type="text/javascript">
  193. <!--
  194. var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1" );
  195. //-->
  196. </script>
  197. </body>
  198. </html>

Message cité 1 fois
Message édité par gelatine_velue le 18-02-2011 à 11:32:38
n°2057726
KoRni
Vision analogique
Posté le 18-02-2011 à 11:33:04  profilanswer
 

Merci, je vais regarder ça.


---------------
Signature Loading...
n°2057738
KoRni
Vision analogique
Posté le 18-02-2011 à 11:45:15  profilanswer
 

gelatine_velue a écrit :


 
edit: je me rends compte que j'ai fait des copier collés de porc qui font que tous les input ont le même id, en plus contenant des espaces.


 
Si je comprends bien, quand tu dis que tous les input ont le même id, tu parles des cases à cocher qui s'appellent toutes "sprycheckbox1" c'est bien ça ?
Pour comprendre, quels problèmes ça peut engendrer que toutes les checkboxes portent le même nom ?


---------------
Signature Loading...
n°2057744
gelatine_v​elue
Posté le 18-02-2011 à 11:50:15  profilanswer
 

KoRni a écrit :


 
Si je comprends bien, quand tu dis que tous les input ont le même id, tu parles des cases à cocher qui s'appellent toutes "sprycheckbox1" c'est bien ça ?
Pour comprendre, quels problèmes ça peut engendrer que toutes les checkboxes portent le même nom ?


 
Je parlais aussi des id="Selection du DVD".
Un id veut dire identifiant, c'est à dire permettant d'identifier un élément, c'est à dire unique. Si tu veux regrouper des éléments avec le même nom utilise des attributs class ou name selon le contexte.
Le principal pb est que le code javascript et css s'attendent à ce qu'il n'y ait qu'un élément ayant un id donné. En général ils ne plantent pas, mais ça ne fera sans doute pas ce que tu veux.

n°2057749
KoRni
Vision analogique
Posté le 18-02-2011 à 11:57:15  profilanswer
 

Merci pour les explications, je corrigerai ça. J'ai regardé le script que tu as ajouté et je pense avoir à peu près compris comment ça fonctionnait. Juste une chose, je comprends pas le (this) de onClick="javascript:compteur(this), je vois pas à quoi ça renvoit ?


---------------
Signature Loading...
n°2057755
gelatine_v​elue
Posté le 18-02-2011 à 12:07:42  profilanswer
 

On veut tester si la case est cochée ou pas. Pour ça, il faut savoir de quelle case on parle. Le this passe en paramètre à la fonction compteur l'élément courant, c'est à dire l'input de type checkbox à partir de laquelle la fonction est appellée.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Compter les cases cochées ?

 

Sujets relatifs
Compter nombre d'enregistrement MYSQLnombre de cases mémoire dans un système 32 bits
Compter enregistrements différents dans un GROUP BYCompter le nombre de fois ou le meme mot apparait ?
[SQL][Qt] Requet pour compter les colonnes ?aide pour detecter les acteurs et les uses cases
Help JS je deviens fou ! Compter div ayant une classe spécifiqueAjouter des cases dans un tableau en javascript
session cases à cocher - formulaire[Access 2007] Cocher cases pour une requête
Plus de sujets relatifs à : Compter les cases cochées ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR