Compter les cases cochées ?

Compter les cases cochées ? - HTML/CSS - Programmation

Marsh Posté le 18-02-2011 à 10:43:11    

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

Marsh Posté le 18-02-2011 à 10:43:11   

Reply

Marsh Posté le 18-02-2011 à 10:55:55    

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.

Reply

Marsh Posté le 18-02-2011 à 11:08:12    

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

Marsh Posté le 18-02-2011 à 11:28:04    

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
Reply

Marsh Posté le 18-02-2011 à 11:33:04    

Merci, je vais regarder ça.


---------------
Signature Loading...
Reply

Marsh Posté le 18-02-2011 à 11:45:15    

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

Marsh Posté le 18-02-2011 à 11:50:15    

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.

Reply

Marsh Posté le 18-02-2011 à 11:57:15    

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

Marsh Posté le 18-02-2011 à 12:07:42    

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.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed