使用Jquery实现Checkbox全选功能

最新推荐文章于 2021-03-10 19:26:35 发布

前端独秀

最新推荐文章于 2021-03-10 19:26:35 发布

阅读量330

点赞数

分类专栏：前端文章标签： jQuery

原文链接：https://www.mk2048.com/blog/blog.php?id=2ib12c2ib&title=%E4%BD%BF%E7%94%A8Jquery%E5%AE%9E%E7%8E%B0Checkbox%E5%85%A8%E9%80%89%E5%8A%9F%E8%83%BD

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

使用jQuery 实现全选非常简单，下边我们就看看如何实现jQuery 全选。假设在页面中有如下标签：

全选<input id="all" type="checkbox" value="" />
投资<input id="Checkbox1" type="checkbox" name="test" value="投资" />
理财<input id="Checkbox2" type="checkbox" name="test" value="理财" />
担当<input id="Checkbox3" type="checkbox" name="test" value="担当" />
成熟<input id="Checkbox4" type="checkbox" name="test" value="成熟" />

jQuery 实现全选的代码如下：

 
       //点击全选框 
      
       jQuery( 
       "#all" 
       ).click( 
       function 
       () { 
      
       if  
       (jQuery( 
       this 
       ).attr( 
       "checked" 
       ) ==  
       true 
       ) { 
      
       //如果是全选,根据name遍历单选框，并全部选中;否则全部取消选中。 
      
       jQuery( 
       "input[name='test']" 
       ).each( 
       function 
       () { 
      
       jQuery( 
       this 
       ).attr( 
       "checked" 
       ,  
       true 
       ); 
      
       }); 
      
       } 
      
       else  
       { 
      
       jQuery( 
       "input[name='test']" 
       ).each( 
       function 
       () { 
      
       jQuery( 
       this 
       ).attr( 
       "checked" 
       ,  
       false 
       ); 
      
       }); 
      
       } 
      
       });

这样我们实现了jQuery 全选。