利用jQuery实现CheckBox全选/全不选/反选的简单代码


Posted in Javascript onMay 31, 2016

jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js?>测试通过,jquery-1.5.1.js?>测试不通过。

实现CheckBox全选/全不选/反选代码如下:

<%@ page language="java" pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>复选框全选/全不选/反选</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript"
  src="<%=request.getContextPath()%>/js/jquery-1.3.1.js"></script>
 <script type="text/javascript"> 
 /**
  * 全选
  * 
  * items 复选框的name
  */
 function allCkb(items){
   $('[name='+items+']:checkbox').attr("checked", true);
 }
   
 /**
  * 全不选
  * 
  */
 function unAllCkb(){
   $('[type=checkbox]:checkbox').attr('checked', false);
 }
   
 /**
  * 反选
  * 
  * items 复选框的name
  */
 function inverseCkb(items){
   $('[name='+items+']:checkbox').each(function(){
    //此处用jq写法颇显??隆L逑植怀?Q飘逸的感觉。
   //$(this).attr("checked", !$(this).attr("checked"));
  
   //直接使用js原生代码,简单实用
   this.checked=!this.checked;
   });
 }
 
 </script>
 </head>
 
 <body>
    <input type='checkbox' name='ckb' value="0"/>白羊座
    <input type='checkbox' name='ckb' value="1"/>狮子座
    <input type='checkbox' name='ckb' value="2"/>水瓶座
    <input type='checkbox' name='ckb' value="3"/>射手座<br/>
    <input type="button" onclick="allCkb('ckb')" value="全 选"/>
  <input type="button" onclick="unAllCkb()" value="全不选"/>
  <input type="button" onclick="inverseCkb('ckb')" value="反 选"/> 
 </body>
</html>

利用jQuery实现CheckBox全选/全不选/反选的简单代码

以上这篇利用jQuery实现CheckBox全选/全不选/反选的简单代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery对数组的操作技巧整理
Mar 25 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery Ajax全解析
Feb 13 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
JS实现可视化文件上传
Sep 08 Javascript
微信小程序实现留言功能
Oct 31 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 #Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 #Javascript
BootStrap创建响应式导航条实例代码
May 31 #Javascript
浅谈js中的延迟执行和定时执行
May 31 #Javascript
温习Javascript基础语法之词法结构
May 31 #Javascript
jQuery文字横向滚动效果的实现代码
May 31 #Javascript
Javascript实现跑马灯效果的简单实例
May 31 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
前端性能优化建议
2020/09/17 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python中实现将多个print输出合成一个数组
2018/04/19 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
什么是Assembly(程序集)
2014/09/14 面试题
会计辞职信范文
2014/01/15 职场文书
建材投资建议书
2014/05/16 职场文书
成本会计岗位职责
2015/02/03 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android