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();
                	
                }
             });
        }); 
})