jquery全选/全不选/反选另一种实现方法(配合原生js)


Posted in Javascript onApril 07, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script language="javascript" src="../css02/js/jquery-1.6.1.js"></script> 
<script> 
$(document).ready(function(){ 
$("#selectAll").click(function(){ 
//这里也可以直接用this,原生js语句 
if($(this)[0].checked){ 
$('[name=items]:checkbox').attr("checked",true); 
}else{ 
$('[name=items]:checkbox').attr("checked",false); 
} 
}); 
$("#XOR").click(function(){ 
$("[name=items]:checkbox").each(function(){ 
this.checked=!this.checked; 
}); 
}); 
}); 
</script> 
<title>Untitled Document</title> 
</head> 
<body> 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" name="items" value="足球" />足球 
<input type="checkbox" id="selectAll" value="全选/不选"/>全选/全部选 
<input type="button" id="XOR" value="反选"/> 
</body> 
</html>
Javascript 相关文章推荐
jquery之Document元素选择器篇
Aug 14 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 #Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 #Javascript
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
python脚本和网页有何区别
2020/07/02 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
Android面试题附答案
2014/12/08 面试题
我的求职计划书
2014/01/10 职场文书
小学社团活动总结
2014/06/27 职场文书
员工评语范文
2014/12/31 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书