利用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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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计算整个mysql数据库大小的方法
2015/06/19 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Django Rest framework权限的详细用法
2019/07/25 Python
详解python中__name__的意义以及作用
2019/08/07 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python ATM功能实现代码实例
2020/03/19 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
实习自我鉴定
2013/12/15 职场文书
2014政务公开实施方案
2014/02/19 职场文书
党的生日活动方案
2014/08/15 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
青涩记忆观后感
2015/06/18 职场文书
协议书格式模板
2016/03/24 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Elasticsearch 配置详解
2022/04/19 Java/Android