Duda lista checkbox jQuery

[fumatamax]

Buenos dias, os expongo mi duda para ver si me podeis echar una mano vosotros la comunidad.

Bueno lo que deseo es tener una lista lleno de checkbox, lo que quiero hacer de efecto es que cuando pinchen a una imagen que el nodo padre es un Div, Bueno cuando hagan click al DIV, quiero es el checkbox este a checked al elemento que hayan hecho click. Aqui pongo el codigo haber que he hecho mal.

Codigo PHP - Monta la Lista de CheckBox sacando los resultados de la Base de Datos

Código PHP:

  /*Se Comprueba que tengan algo en la BS*/
if (mysqli_num_rows($res) >= 1) {
/*Se Comprueba de que sea igual a 0 y es de q esta Agotado*/
 if ($fila["Agotado"] == 0) {
   $losProductos .='<li id="checklist">
                                      <a class="swipebox"  title="'.$fila["Nombre"].'" id="btnProducto">
                                              <img class="image-decoration" src="'.$fila["Imagen"].'" alt="'.$fila["Nombre"].'" />
                                      </a>
                                      <div >
                                            <div>
                                                    <input type="checkbox" class="css-checkbox" name="productCheck[]" value="' . $fila["idProducto"] . '" />
                                            </div>
 
                                            <div >
                                                    ' . $fila["Nombre"] . '
                                            </div>
                                    </div>
                                     <input type="hidden" name="protid" value="' . $fila["idProducto"] . '" />
                              </li>';
 
}
 
} 
   

Ha ora cuando entrar en el index si todo ha ido Bien deberia de mostrar los resultados de la Base de Datos, pero el problema esta en el jQuery creo.

Codigo jQuery

Código:

$(document).ready(function(){
 $(".container  #checklist").toggle(
		function(){
			$(this).css({"border":"3px solid #FF4A24", "borderRadius":"8px"});
			$("#ComprobarCheck").attr('checked', 'checked');	
			$("#activo").append("<p>Marcado</p>");
		},
		function(){
			$(this).css({"border":"","borderRadius":""});
			$("#ComprobarCheck").removeAttr('checked');
			$("#activo").empty("<p>Marcado</p>");
	});
});

Ha ora bien, el efecto de añadir CSS de jQuery si que funciona ya que cada vez que hago click selecciona el elemento que hemos hecho click, pero el problema donde esta es en el checkbox ya que no deja la casilla marcada como checked. Solamente le pone al checked al primer checkbox de la lista, no recorre toda la lista que saca de la BASE DE DATOS, he aqui mi problema.
Bueno ya me direis si podeis hecharme una mano.

Y dar la gracias a esta Comunidad, por estar ahi.
Un Saludo Fumatamax

[pzin]

No veo que sea necesario usar JavaScript para hacer eso. Puedes usar perfectamente labels para eso:

Código HTML:

<input type="text" id="algo" name="otracosa">
<label for="algo"><img src="perro.png"></label>
 

Que funcionan justamente como quieres, si se hace click en un label, el elemento al que esté referenciado se marcará. Y luego puedes estilizarlos si su elemento está marcada mediante CSS:

Código CSS:

input:checked + label {
  border: 2px;
  border-radius: 5px;
}