jquery - 在选中的复选框上，使用 css 和/或 jQuery 将父 DIV 包装为边框

Question

我希望有人能帮助我解决以下问题。

如果用户选中复选框 1，则使用纯 CSS 或 CSS 和 jQuery 的组合将边框(边框:1px 纯绿色；)添加到 DIV SmallSquarePhoto。否则 checkbox1 具有透明颜色(边框:4px 纯色透明；)。任何帮助将不胜感激......谢谢

<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/