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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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 变量定义方法
2009/06/14 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php获取操作系统语言代码
2013/11/04 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python模块导入的细节详解
2018/12/10 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
酒店保安员岗位职责
2014/01/31 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android