onclick check box back ground colour change of parent div

I have made an information card and in the top right hand corner there is a check box, within the info card div. The objective is when the check box is checked the background colour of the info card div changes with a fade. Can't seem to get it to work. any help would be appreciated. Code below:

HTML:

<div class="pin" id="pin"> 
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" id="like" ><label></label> 
</div>    
<p class="pull-left">13.01.16  </p> <!-- date -->     
<h2>Title </h2> <!-- title-->   
<p> </p>
<div class="text-center">    
<p class="card-title"><a href="" class="">Like</p></a>        
</div>
</div>

<script>
$("#like").click(function () {
$("#pin").toggleClass("pincard-checked");
});
</script> 

CSS

.pincard-checked{background-color: #000000; color: #ffffff;}