基于jquery实现复选框全选,反选,全不选等功能


Posted in Javascript onOctober 16, 2015

jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):

<input type="checkbox" name="fruit" value="apple" />苹果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="全不选"> 
<input type="button" id="btn3" value="反选"> 
<input type="button" id="btn4" value="选中所有奇数"> 
<input type="button" id="btn5" value="获得选中的所有值">

则分别实现相关功能的完整代码如下:

$(function(){ 
  $('#btn1').click(function(){//全选 
    $("[name='fruit']").attr('checked','true'); 
  }); 
  $('#btn2').click(function(){//全不选 
    $("[name='fruit']").removeAttr('checked'); 
  }); 
  $('#btn3').click(function(){//反选 
    $("[name='fruit']").each(function(){ 
      if($(this).attr('checked')){ 
        $(this).removeAttr('checked'); 
      }else{ 
        $(this).attr('checked','true'); 
      } 
    }) 
  }); 
  $("#btn4").click(function(){//选中所有奇数 
    $("[name='fruit']:even").attr('checked','true'); 
  }) 
  $("#btn5").click(function(){//获取所有选中的选项的值 
    var checkVal=''; 
    $("[name='fruit'][checked]").each(function(){ 
      checkVal+=$(this).val()+','; 
    }) 
    alert(checkVal); 
  }) 
});

注意使用 jquery 之前必须要引入 jquery 包哦!

以上就是小编辛苦整理的代码,是不是用起来很方便,希望能够帮到大家。

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
checkbox使用示例
Aug 23 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
js生成随机数的方法实例
Oct 16 #Javascript
jQuery实现商品活动倒计时
Oct 16 #Javascript
js如何打印object对象
Oct 16 #Javascript
JavaScript各类型的关系图解
Oct 16 #Javascript
js实现新浪微博首页效果
Oct 16 #Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 #Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
ES6实现图片切换特效代码
2020/01/14 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
python中字符串前面加r的作用
2015/06/04 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
详解Python发送email的三种方式
2018/10/18 Python
pandas 空数据处理方法详解
2019/11/02 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
成考报名单位证明范本
2014/01/16 职场文书
打架检讨书2000字
2014/02/22 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
订货会邀请函
2015/01/31 职场文书
入党介绍人考察意见
2015/06/01 职场文书
现实表现证明材料
2015/06/19 职场文书
2015大一新生军训感言
2015/08/01 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Java设计模式中的命令模式
2022/04/28 Java/Android