jQuery checkbox全选/取消全选实现代码


Posted in Javascript onNovember 14, 2009

jQuery版本:1.3.2

<html> 
<head> 
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
</head> 
<body> 
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br /> 
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br /> 
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br /> 
<input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br /> 
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选 
<script type="text/javascript"> 
$("#chk_all").click(function(){ 
$("input[name='chk_list']").attr("checked",$(this).attr("checked")); 
}); 
</script> 
</body> 
</html>

jQuery.attr 获取/设置对象的属性值,如:
$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中) 
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

再如:
$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg' 
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

下面的代码是获取上面实例中选中的checkbox的value值:
<script type="text/javascript"> 
//获取到所有name为'chk_list'并选中的checkbox(集合) 
var arrChk=$("input[name='chk_list][checked]"); 
//遍历得到每个checkbox的value值 
for (var i=0;i<arrChk.length;i++) 
{ 
alert(arrChk[i].value); 
} 
</script>

哪位高手能把上面遍历的过程用$.each()写出来,不胜感激。
Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
javascript中的this作用域详解
Jul 15 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 #Javascript
jquery 可排列的表实现代码
Nov 13 #Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 #Javascript
传智播客学习之JavaScript基础篇
Nov 13 #Javascript
用document.documentElement取代document.body的原因分析
Nov 12 #Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 #Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 #Javascript
You might like
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
canvas实现钟表效果
2017/02/13 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
Python 中如何写注释
2020/08/28 Python
用python绘制樱花树
2020/10/09 Python
浅谈Python __init__.py的作用
2020/10/28 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
初中科学教学反思
2014/01/21 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
社会治安综合治理责任书
2015/01/29 职场文书