"Bouton à cocher" ?

"Bouton à cocher" ? - HTML/CSS - Programmation

Marsh Posté le 12-04-2011 à 16:50:53    

Salut,  
 
J'aurais besoin de vos lumières :  
 
Je souhaiterais, dans un formulaire mettre des boutons (mettons une 30aine) que l'on pourrait enfoncer (cocher) :  
 
Comme des cases à cocher (donc plusieurs cliquable à la fois) sauf que ce serait des boutons (avec deux images différentes suivant si il est enfoncé ou pas),  
suivant si le bouton est enfoncé ou non ceci renverrait une valeur par le biais du formulaire.
Et j'aimerais limiter le nombre de boutons enfoncés à 4... sur des dizaines de disponibles.  
 
Si possible sans passer par JavaScript. Mais si il n'y a que cette manière alors oui ...
 
 :hello:


---------------
http://www.flickr.com/photos/julcok/
Reply

Marsh Posté le 12-04-2011 à 16:50:53   

Reply

Marsh Posté le 12-04-2011 à 17:14:47    

C'est impossible en HTML pur, tu seras obligé d'utiliser javascript.
Et ça m'étonnerait qu'il existe quelque chose qui colle à ton besoin, qui est très spécifique ...

Reply

Marsh Posté le 12-04-2011 à 17:37:07    

Bon je vais creuser la question en Javascript alors ...
(J'imagine qu'un événement onclick avec un changement d'image à la clef ferait l'affaire , mais JavaScript ce n'est pas mon domaine, va falloir que je m'y mette)


---------------
http://www.flickr.com/photos/julcok/
Reply

Marsh Posté le 12-04-2011 à 18:02:00    

Voici ce que je ferais :
je créerais mes 30 boutons (ou autre élément HTML) avec une classe spécifique (check-button pour l'exemple).
Tu styles correctement ces boutons avec .check-button pour un bouton simple, et .check-button.checked pour un bouton coché
Dans l'exemple, je pars du principe que la valeur à envoyer est dans l'attribut value du bouton, et qu'il y a 4 inputs hidden pour envoyer les valeurs.

 

Et en js (avec jquery)

Code :
  1. $('.check-button').click(function(){
  2.  var $this = $(this);
  3.  var max_checked = 4;
  4.  if($this.hasClass('checked')){
  5.    this.removeClass('checked');
  6.  }else{
  7.    if($('.check-button.checked').length <= 4){
  8.      this.addClass('checked');
  9.    }else{
  10.      // gestion de l'erreur
  11.      alert('4 choix max');
  12.    }
  13.  }
  14.  refreshHiddenInputs();
  15. });
  16.  
  17. function refreshHiddenInputs(){
  18.  var $inputs = $('.checkbuttons-hidden-inputs');
  19.  $inputs.val('');
  20.  $('.check-button.checked').each(function(i,button){
  21.    if(i>=4) alert('oups'); // gestion d'erreurs a faire
  22.    $inputs[i].val($(button).attr('value'));
  23.  });
  24. }


Message édité par Paulp le 13-04-2011 à 10:01:03
Reply

Marsh Posté le 12-04-2011 à 18:16:51    

Merci beaucoup :)
je teste ça dès que je peux


---------------
http://www.flickr.com/photos/julcok/
Reply

Sujets relatifs:

Leave a Replay

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