html
<ul class="grid">
<li class="item">
<input type="checkbox" name="check"/>
<li class="item">
<input type="checkbox" name="check"/>
<li class="item">
<input type="checkbox" name="check"/>
<li class="item">
<input type="checkbox" name="check"/>
js
$(function(){
var s = $("input[name='check']");
s.each(function(i) {
// alert(i);
$(this).click(function(){
if(this.checked==true){
alert(this.value);
$(this).parents('.item').attr('class','item active');
}
else{
alert(this.value);
$(this).parents('.item.active').attr('class','item');
}
});
});
})
css
.grid li {
margin: 3px;
font-size: 14px;
float: left;
text-align: left;
line-height: 150%;
border-radius: 10px;
border: 1px solid #BFBFBF;
box-shadow: 0px 0px 0px 0px #aaa;
}
.item.active{
-webkit-transition: border linear .2s,-webkit-box-shadow linear .5s;
border-color: rgba(141,39,142,.75);
-webkit-box-shadow: 0 0 18px rgba(111,1,32,3);
z-index: 2;
}
单个复选框选中事件
$(function(){
var s = $("input[id='grewshow']");
s.each(function(i) {
// alert(i);
$(this).click(function(){
if(this.checked==true){
$("#jqxx-tab").show();
}
else{
$("#jqxx-tab").hide();
}
});
});
})