基于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 call和apply方法
Nov 24 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
jQuery使用方法
Feb 04 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
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实现获取FLV文件的时间
2015/02/10 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
js字符编码函数区别分析
2008/06/05 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
node.js操作MongoDB的实例详解
2017/10/11 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python绘制简单彩虹图
2018/11/19 Python
python dlib人脸识别代码实例
2019/04/04 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
师范生求职信
2014/06/14 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
委托书格式要求
2015/01/28 职场文书
搞笑结婚保证书
2015/05/08 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书