Corsi on-line

Select multiple con i checkbox usando CSS e jQuery

All’interno dei form, quando si ha necessità di consentire all’utente delle scelte multiple tra diversi valori predefiniti, si può scegliere se utilizzare un campo <select> a scelta multipla (click + CTRL) oppure dei checkbox.

Entrambe le soluzioni offrono una risposta alla nostra esigenza, ma nessuna delle due può considerarsi “perfetta”. Personalmente preferisco i checkbox (più intuitivi) ma alcune caratteristiche peculiari del tag <select> (come lo scrolling ed il colorarsi delle option selezionate) sono – da un punto di vista visivo – un valore da preservare.

Come fare quindi? Semplice, fondiamo insieme le caratteristiche dei due elementi!
Per farlo utilizzeremo i checkbox, il tag <label>, un pizzico di CSS ed un po’ di codice javascript mediante l’aiuto della libreria jQuery.
Per prima cosa vediamo il codice HTML della nostra lista di checkbox (nell’esempio ci sono solo tre opzioni ma, ovviamente, potete inserirne quante ne volete):

<ul id="jqmultiselect">
<li>
  <label for="cinema">
    <input type="checkbox" name="hobbies[]" id="cinema" value="cinema" class="checkbox">
    Cinema
  </label>
</li>
<li>
  <label for="cucina">
    <input type="checkbox" name="hobbies[]" id="cucina" value="cucina" class="checkbox">
    Cucina
  </label>
</li>
<li>
  <label for="fai_da_te">
    <input type="checkbox" name="hobbies[]" id="fai_da_te" value="fai_da_te" class="checkbox">
    Fai da te
  </label>
</li>
</ul>

Come potete notare abbiamo creato un semplice elenco puntato e, all’interno di ogni item, abbiamo inserito dei tag label i quali, a loro volta, contengono i singoli checkbox.
Il codice HTML necessita, ovviamente, di essere stilizzato con un po’ di CSS:

ul#jqmultiselect{
  width: 220px;
  height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  padding: 0;
  border: 1px solid #CCC;
}
#jqmultiselect li label{
  display: block;
  padding: 4px 4px 4px 26px;
  color: #000;
  outline: none;
  position: relative;
}
#jqmultiselect li label:hover{
  color: #000;
  background-color: #EEE;
}
#jqmultiselect li label.selected{
  color: #FFF;
  background-color: #CCC;
}
#jqmultiselect li label .checkbox{
  position: absolute;
  top: 2px;
  left:	2px;
}

Ovviamente potete personalizzare a piacimento lo stile al fine di adattarlo alle vostre esigenze grafiche.
Vediamo, infine, il codice javascript:

$(document).ready(function() {
  // se il checkbox è selezionato coloro la label per simulare la colorazione delle select
  $('#jqmultiselect label').each(function() {
    if ($(this).find(':checkbox').attr('checked')) $(this).addClass('selected');
  });
  // al click sul checkbox metto/tolgo la classe 'selected'
  $('#jqmultiselect :checkbox').click(function(e) {	
    var checked = $(this).attr('checked');
    $(this).closest('label').toggleClass('selected', checked);
  });
});

Affinchè l’effetto funzioni è necessario, ovviamente, includere la libreria jQuery all’interno della pagina.
Di seguito uno screenshot del risultato finale:

A questa pagina potete testare un esempio funzionante dello script proposto.

Post correlati
  • Michele

    La soluzione è interessante, ma ho visto che ci sono dei problemi nella visualizzazione con ie6 e ie7, lo sapevi già? nel caso c’è una soluzione, perchè sarebbe un peccato…

  • Anche io ho riscontrato problemi con IE7… avete soluzioni??

I più letti del mese
Tematiche