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 面向对象编程
Oct 28 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
vue实现全选、反选功能
Nov 17 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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/25 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php生成QRcode实例
2014/09/22 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python动态加载包的方法小结
2016/04/18 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python如何实现代码检查
2019/06/28 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
python的链表基础知识点
2020/09/13 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
少先队中队工作总结
2015/08/14 职场文书
《山中访友》教学反思
2016/02/24 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server