码迷,mamicode.com
首页 > Web开发 > 详细

jQuery全选、全不选、反选的简洁写法【实例】

时间:2017-08-03 18:53:26      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:checkbox   jquery   input   function   也有   als   click   div   button   

全选方面的功能几乎是每个需要列表展示的网站所必不可少的,当然此功能也有很多种写法,现在介绍一下,比较简洁易懂的写法:
<input type="checkbox" name="gogf[]"/>
<input type="checkbox" name="gogf[]"/>
<input type="checkbox" name="gogf[]"/>
<button id="all_xuan">全选</button> 
<button id="no_xuan">全不选</button>
<button id="fan_xuan">反选</button>
 
//jQuery代码如下:
$(‘button#all_xuan‘).click(function(){
       $(‘[name="gogf[]"]:checkbox‘).prop(‘checked‘,true);
})
$(‘button#no_xuan‘).click(function(){
  $(‘[name="gogf[]"]:checkbox‘).prop(‘checked‘,false);
})
$(‘button#fan_xuan‘).click(function(){
  $(‘[name="gogf[]"]:checkbox‘).each(function(index,element){
    this.checked=!this.checked;
  });
})
 
 
有时我们也会用 循环的方式选中
$(‘input:checkbox‘).each(function() {
  $(this).attr(‘checked‘, true);
});
 
本文:摘抄+记录
 

jQuery全选、全不选、反选的简洁写法【实例】

标签:checkbox   jquery   input   function   也有   als   click   div   button   

原文地址:http://www.cnblogs.com/ameizai/p/7281232.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!