基于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 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
关于express与koa的使用对比详解
Jan 25 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
jQuery属性选择器用法实例分析
2019/06/28 jQuery
微信小程序canvas分享海报功能
2019/10/31 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
python删除过期文件的方法
2015/05/29 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
机关单位动员会主持词
2014/03/20 职场文书
安全协议书
2014/04/23 职场文书
财务工作失误检讨书
2015/02/19 职场文书
职工食堂管理制度
2015/08/06 职场文书
文明礼仪主题班会
2015/08/13 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL