您的位置：首页 > Web前端 > JQuery

【jQuery】 用jQuery和div实现复选框

2015-09-08 09:57 573 查看

原理：

选中div后自动设置div下面的input[type="checkbox"]的checked属性为真
$(document).ready(function(){
//$("div.product").click(function(){
//	$(this).toggleClass('select');
//});
$("div.product").on("click",function(){
if($(this).hasClass('select')){
$(this).removeClass('select');
$(this).children("input[type=checkbox]").attr("checked",false)
			}else{
$(this).addClass('select');
$(this).children("input[type=checkbox]").attr("checked",true)
}
});
})

效果图：




当点击某一个div后改变其class，并选中checkbox（取消选中，相应的也会取消checkbox的选中状态）：





另外：如果设置checkbox的宽高为0，即隐藏了复选框。就可通过判断div是否为彩色来判断checkbox的状态。





全选和不选：
$(document).ready(function(){
//$("div.product").click(function(){
//	$(this).toggleClass('select');
//});
$("div.product").on("click",function(){
if($(this).hasClass('select')){
$(this).removeClass('select');
$(this).children("input[type=checkbox]").attr("checked",false)
			}else{
$(this).addClass('select');
$(this).children("input[type=checkbox]").attr("checked",true)
}
});
//$("div.product").toggleClass('select')
$("div.selectall").on("click",function(){
if($("div.product").hasClass('select')){
$("div.product").removeClass('select');
$("div.product").children("input[type=checkbox]").attr("checked",false)
			}else{
$("div.product").addClass('select');
$("div.product").children("input[type=checkbox]").attr("checked",true)
}
});
})

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航