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

最新推荐文章于 2023-06-19 22:38:58 发布

lyloou

最新推荐文章于 2023-06-19 22:38:58 发布

阅读量822

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/ly1414725328/article/details/48286955

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原理：

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