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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
AngularJS表单验证功能分析
May 26 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
限制文本字节数js代码
2007/03/06 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python复制文件操作实例详解
2015/11/10 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python 的topk算法实例
2020/04/02 Python
如何写python的配置文件
2020/06/07 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
初级Java程序员面试题
2016/03/03 面试题
统计员岗位职责
2013/11/14 职场文书
益达广告词
2014/03/14 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js