Este es un ejemplo de lo que digo, seguro que sacas ya algunas ideas para empezarlo :)
Código Javascript
:
Ver original<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//ocultar las imagenes
$('.ensalada img').hide();
//remover los checkbox seleccionados
$('input[type=checkbox]').removeAttr('checked');
// al seleccionar los checkbox <input type=checkbox name=*>
$('input[type=checkbox][name]').on('click', function(event){
//obtenemos el checkbox seleccionado
var select = $(this).attr('name');
//Por cada imagen que haya...
$('.ensalada img').each(function() {
var imgAlt = $(this).attr('alt');
// comparamos si coincide con el checkbox seleccionado
if (imgAlt == select) {
//si esta visible, ocultarlo..
if ($(this).is(':visible')) {
$(this).hide();
//si esta oculto, mostrarlo..
}else{
$(this).show();
};
};
});
event.stopPropagation();
});
});
</script>
<style type="text/css">
.ensalada{background-color: blue;width: 100px; height: 100px;margin-left:auto;margin-right:auto;}
.ensalada img{position: absolute; }
</style>
</head>
<body>
<p>...</p>
<input type="checkbox" name="queso mozzarella" id="queso mozzarella" value="40,92,6.44,0,18.7,0.52,149.2,105.2,0.08,96.4,0">
<label>queso mozzarella</label>
<br>
<input type="checkbox" name="queso parmesano" id="queso parmesano" value="10,40,2.45,0,9.05,0.13,109,1.26,0.06,25.4,0">
<label>queso parmesano</label>
<br>
<input type="checkbox" name="jamon de pavo" id="jamon de pavo" value="40,41,0.5,0,28,0.04,0,0,0,0,0">
<label>jamon de pavo</label>
<p>...</p>
<br>
<br>
<div class="ensalada">
<img src="#" height="100px" width="100px" alt="queso mozzarella">
<img src="#" height="100px" width="100px" alt="queso parmesano">
<img src="#" height="100px" width="100px" alt="jamon de pavo">
</div>
</body>
</html>
