Suena medio raro pero es posible xD tal como se ve en la imagen:

Y es una simulación de checkboxes hecho en ajax que hize con imagenes xD
Lo primero que necesitamos son dos imagenes:
| Checkeado: |  |
| No checkeado: |  |
Nota:
Las imagenes no deben pasar los 10 pixeles de alto para que se vea bién con el tamaño de la fuente standard (12px).
Ahora hacemos nuestro código HTML:
<style>
.desseleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(uncheck.png);
}
.seleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(check.png);
}
</style>
<select id="id_select" name="nombre">
<optgroup label="Opciones">
<option class="class="desseleccionado" value="1" /> Opción 1
<option class="class="desseleccionado" value="2" /> Opción 2
<option class="class="desseleccionado" value="3" /> Opción 3
</optgroup>
</select>
Si se fijan cada opción tiene una clase llamada desseleccionado donde ese estilo incluye la posición de una imagen llamada uncheck.png que es la imagen de no checkeado por lo tanto ya tenemos nuestro select con los ckeckboxes pero solamente simbolizados ya que necesitamos que realmente funcionen como checkboxes y ahi entra jquery:
<style>
.desseleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(uncheck.png);
}
.seleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(check.png);
}
</style>
<script>
$(document).ready(function(){
$('#id_select').change(function(){
$('#id_select option:selected').each(function(){
$(this).addClass('seleccionado');
});
});
})
</script>
<select id="id_select" name="nombre">
<optgroup label="Opciones">
<option class="class="desseleccionado" value="1" /> Opción 1
<option class="class="desseleccionado" value="2" /> Opción 2
<option class="class="desseleccionado" value="3" /> Opción 3
</optgroup>
</select>
Al hacerle click a cada opción este adoptará la imagen del checkbox seleccionado

Ahora con $(this).attr('class') podemos saber en que posición está la clase actual y ya con esto podemos trabajar en nuestros checkboxes
<style>
.desseleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(uncheck.png);
}
.seleccionado{
background-repeat: no-repeat;
background-position: 5px;
overflow: visible;
padding: 0px 10px 0px 25px;
background-image: url(check.png);
}
</style>
<script>
$(document).ready(function(){
$('#id_select').change(function(){
$('#id_select option:selected').each(function(){
if($(this).attr('class') == 'seleccionado'){
$(this).addClass('desseleccionado');
/* agrega_input_invisible($(this).value) */
}else{
$(this).addClass('seleccionado');
/* elimina_input_invisible($(this).value) */
}
});
});
})
</script>
<select id="id_select" name="nombre">
<optgroup label="Opciones">
<option class="class="desseleccionado" value="1" /> Opción 1
<option class="class="desseleccionado" value="2" /> Opción 2
<option class="class="desseleccionado" value="3" /> Opción 3
</optgroup>
</select>
Ahora ya tenemos la estructura de nuestros checkboxes listos dentro de nuestro select y puede servir para crear un multiselect pero sin tener que fijar el despliegue del select.
Con esto ahorramos espacio y nos da un buén aspecto al nuestros formularios.
Las funciones de crear y eliminar inputs invisibles son funciones de agregar al DOM los inputs de tipo hidden dependeiendo del script y las necesidades de cada uno.