在选中复选框时，使用 css 和/或 jQuery 用边框包裹父 DIV答案

【问题标题】：On checkbox checked, wrap a parent DIV with a border using css and/or jQuery在选中复选框时，使用 css 和/或 jQuery 用边框包裹父 DIV
【发布时间】：2015-04-13 06:45:32
【问题描述】：

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

如果用户选中 checkbox1，则使用纯 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>

【问题讨论】：

标签： jquery css asp.net checkbox

【解决方案1】：

$('#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; 
}

小提琴：http://jsfiddle.net/y9chau9o/

【讨论】：

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

【解决方案2】：

点击复选框添加边框，Demo

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

【讨论】：