Selección multiple con distintos colores

yoburtu · #1 (**permalink**) 22/12/2011, 13:14

Hola,

estoy programando un intervalo horario en un formulario y me gustaría saber como puedo hacer una select o un grupo de checkbox pero que contenga una selección múltiple en el mismo elemento.

Es decir, yo quiero que en la franja horaria, poder seleccionar por ejemplo de las 2 a las 4 con un color, de las 4 a las 7 de otro color, etc, hasta 5 colores, que se corresponden con los 5 intervalos.

Previamente tendría que haber un check para seleccionar el color (intervalo horario que quiero activar).

He visto este control fancy checkbox, pero claro, solo me permite seleccionar con un color:

http://craftyman.net/fancy-checkbox-con-css-y-jquery/

Saludos.

Gilad · #2 (**permalink**) 23/12/2011, 07:49

Puedes usar el "OPTGROUP" para agrupar las franjas horarias y darle estilo.

emprear · #3 (**permalink**) 23/12/2011, 12:55

Partamos de la base de que esto involucra más a JavaScript que al propio Css
Para usar un select, vi varios plugins de jquery, pero ninguno hacía exactamente lo que queres. Con checkboxes si es posible algo similar, utilizando imágenes, o una capa a la que se le cambie el texto y el color, yo he usado el primer método, con imágenes

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chk img</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
.boxes {
    /* descomentar la siguiente linea para ocultar los checkboxes */
/* display: none; */
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
 function testchk(){
var valor = document.getElementById('chk_id').checked; 
var valor2 = document.getElementById('chk_id2').checked; 
alert(valor + '-' +valor2);
}
function check(checkboxid,imag,reemplazo,defecto) {  
var valor = document.getElementById(checkboxid).checked;
 
if (valor == false){
document.getElementById(checkboxid).checked = true;  
document.getElementById(imag).src = reemplazo;  
}else{
document.getElementById(checkboxid).checked = false;  
document.getElementById(imag).src = defecto;   
}
 
}  
//]]>
</script>
</head>
<body>
<img src="checkboxbg.gif" onclick="check('chk_id',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="uno" />
<img src="checkboxbg.gif" onclick="check('chk_id2',this.id,'checkboxbg2.gif','checkboxbg.gif');" width="110" height="150" alt="" id="dos" />
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<p class="boxes">
<input type="checkbox" id="chk_id" name="preferencias[]" value="internet" />
<input type="checkbox" id="chk_id2" name="preferencias[]" value="deportes" />
</p>
<p>
<br />
<input type="submit" name="procesar" value="enviar"/>
</p>
</form>
<p>
<br />
 <a href="#" onclick="testchk();">Verificar</a> 
</p>
 
<?php
 
if(isset($_GET['procesar'])){
 
$prefs = $_GET['preferencias'];
    if(!empty($prefs)){
    echo "tus preferencias son: <br />";
    $N = count($prefs);
        for($i=0; $i < $N; $i++){
        echo $prefs[$i] . "<br />";
        }
}
 
}
?>
</body>
</html>

La función de js function testchk(), solo está para verificar el funcionamiento, y los checkboxes estan visibles por la misma razón, edita el css para ocultarlos.
Te dejo una demo (las imágenes son solo de prueba, tendrías que hacer algo descriptivo)

http://foros.emprear.com/javascript/checkboxes-ocultos/

y seguramente se le pueden hacer algunas optimizaciones

Saludos