选中此复选框时，使用CSS和/或jQuery将带边框的父DIV包装起来

Question

I hope someone could help me with the following.

If a user checks checkbox1 then a border (border: 1px solid green;) is added to the DIV SmallSquarePhoto using pure CSS or a combination of CSS and jQuery. Otherwise checkbox1 has a transparent color (border: 4px solid transparent;). Any help would be appreciated...Thanks

<div id="SmallSquarePhoto" class="SmallSquarePhoto" style="background-image: url(/Members/images/background/<%# Eval("BG_fileName") %>)">
<div class="SmallSquarePhoto-content-wrapper"><div class="SmallSquarePhoto-content-inner">
<input id="checkbox1" name="BG_list" type="checkbox" runat="server" value='<%# Eval("BG_fileName") %>' />
</div></div></div>

Answer 1

JS

$('#checkbox1').on('click', function () {
    $('#SmallSquarePhoto').toggleClass('green-border', $(this).is(':checked'));
});

CSS

.green-border{
   border: 1px solid green;
}
#SmallSquarePhoto #checkbox1 {
    border: 4px solid transparent;
}
#SmallSquarePhoto.green-border {
    border: 1px solid green;
}
#SmallSquarePhoto.green-border #checkbox1 {
    border: 0; 
}

Fiddle: http://jsfiddle.net/y9chau9o/

Answer 2

On clicking check box adding border, Demo

$('#checkbox1').click(function(){    
    $('#SmallSquarePhoto').toggleClass('green-border');
});