基于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 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
前端性能优化及技巧
May 06 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
微信小程序实现留言板
Oct 31 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
Vue实现返回顶部按钮实例代码
Oct 21 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php 获取完整url地址
2008/12/20 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
精彩的广告词
2014/03/19 职场文书
捐资助学感谢信
2015/01/21 职场文书
贷款收入证明格式
2015/06/24 职场文书
小学新课改心得体会
2016/01/22 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
iPhone13再次曝光
2021/04/15 数码科技
python Polars库的使用简介
2021/04/21 Python
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js