Páginas: [1]
  Imprimir  
Autor Tema: Como poner checkbox dentro de un select  (Leído 729 veces)
0 Usuarios y 1 Visitante están viendo este tema.
WHK
吴阿卡
Administrador
Usuario constante
*****

Karma: +8/-3
Mensajes: 272


Coder

yan_unico_102
Ver Perfil WWW Email
« : Octubre 02, 2009, 04:58:05 »


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:
Código:
<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:
Código:
<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  :P Ahora con $(this).attr('class') podemos saber en que posición está la clase actual y ya con esto podemos trabajar en nuestros checkboxes
Código:
<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.
En línea

nakp
Moderador global
Usuario regular
*****

Karma: +5/-1
Mensajes: 92



Ver Perfil
« Respuesta #1 : Octubre 02, 2009, 09:50:55 »


mm bueh... pierde el objetivo del select pero esta bien trabajado xDDD y por lo que veo... te enamoraste de jquery :P jajaja
En línea
Páginas: [1]
  Imprimir  
 
Ir a: