Cambiar color de div al hacer click en input checkbox

[AngelMarine]

Con el siguiente script que he hecho esperaba que cuando se diera click en el input type="checkbox" se cambiase el color del div id="design-checkbox". Pero no funciona.

PD: Mis conocimientos de javascript son muy básicos, a lo mejor la solución es sencilla y no me he percatado. jejeje

<div>
<script>
$(document).ready(function(){
$("#checkbox-design").click(function(){
if ($(this).is(':checked'))
{
$("#design-checkbox").style.backgroundColor("#3FB2FF");
}
else
{
$("#design-checkbox").style.backgroundColor("rgba(196, 196, 196, 1)");
}
});
});
</script>

<div id="design-checkbox" style="background-color: rgba(196, 196, 196, 1);">

<input id="checkbox-design" name="checkbox-design" type="checkbox">

<p>DISEÑO</p>

</div>
</div>

[PHPeros]

Si importas una librería es para utilizarla, no para mezclarlo con JavaScript nativo...

Manual.

[robertty55]

El Jquery quedaria así:

Código Javascript:

$(document).ready(function(){
        $("#checkbox-design").click(function(){
            if ($(this).is(':checked'))
            {
                $("#design-checkbox").css("background-color", "#3FB2FF");
            }
            else
            {
                $("#design-checkbox").css("background-color", "rgba(196, 196, 196, 1)");
            }
        });
    });
 

Como te dice PHPeros, si importas una librería, haz uso de todos sus metodos y funciones.

Espero te ayude.