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

原理：

选中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) 
   
   
   
   
   
 
     } 
   
   
   
   
   
 
     }); 
   
   
   
   
   
 
     })