利用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 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python实现读取并保存文件的类
2017/05/11 Python
python3实现名片管理系统
2020/11/29 Python
tensorflow之并行读入数据详解
2020/02/05 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
零基础学python应该从哪里入手
2020/08/11 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
舞蹈教育学专业求职信
2014/06/29 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
上班迟到检讨书
2015/05/06 职场文书
撤诉申请怎么写
2015/05/19 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电