CSS en función de evento onclick

[humanista]

Hola, tengo esto:

Código PHP:

  echo "<a id='checkbook' href='pagina.php' style='display:block; width:110px; height:125px; padding:5px; background-color:#cccccc;'>"; 
 
echo "<table border=0 cellpadding=0 cellspacing=0>"; 
echo "<tr>"; 
    echo "<td height=70 width=120 style='vertical-align: top;' align=center>";         
            echo "<input type='checkbox' id='$idprofile' name='$idprofile' style='vertical-align:bottom; align:center;' onclick=\"updatelist('$idlist','$idprofile')\">"; 
    echo "</td>"; 
echo "</tr>"; 
echo "</table>";                                                             
 
echo "</a>";  
   

Lo que hago es que cuando se ejecuta el evento onclick ejecuta un AJAX e intento que el color de fondo del link (un recuadro) cambie de gris (#CCCCCC) a azul claro(#E4EAF7).

Para ello en el AJAX pongo esto:

Código Javascript:

document.getElementById('checkbook').style.backgroundColor = '#E4EAF7';
 

pero no va... porqué puede ser?

[undakel]

Hay un seudo elemento para enlaces en CSS que es a:active, que aplica los estilos cuando el usuario ha hecho click. Entonces esto debería ser suficiente:

Código:

#elemento:active {
    background-color: #E4EAF7;
}

No te haría falta usar Javascript.

[humanista]

sí pero si vuelvo a hacer click quiero que el recuadro "regrese" a ser gris (#CCCCCC) y con active no pasaría esto.

es decir checkbox no seleccionado recuadro gris, seleccionado recuadro azul

[undakel]

Acabo de caer que los elementos checkbox no se se les puede cambiar el fondo, creo que sólo funciona en algunas navegadores como internet explorer pero en otros no se puede.

Hay plugins que lo que hacen es hacer invisible el checkbox y engañan al ojo poniendo un elemento detrás con una imagen.

[humanista]

creo que no me he explicado bien, no se trata de cambiar el fondo al checkbox, sino al elemento <a> que lo contiene,

es decir es un link en forma de recuadro y dentro está el checkbox. si se hace click en el checkbox, el recuadro (es decir el link, ya que éste es en forma de recuadro) cambia de color.

si se vuelve a clicar el checbox (deseleccionar), vuelve al color inicial.

[undakel]

Uff, ahora si te entiendo.

Cuando haga click puedes comprobar si el checkbox está activo o no, y luego cambiar el color al enlace:

if (document.getElementById("checkboxId").checked) {
document.getElementById('loginform').style.backgro undColor = '#E4EAF7';
}

Debería funcionar sin hacer la comprobación de checkbox.

[humanista]

así es exactamente cómo lo tengo y no me va

[undakel]

He probado tu código y me ha funcionado, eso sí, he tenido que añadir un onclick="return false" en el enlace para que no se cambie de página. Pero funciona.

[humanista]

ahora sí q me va, graciasssssssss