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中xml操作实现代码
Nov 21 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
js编写简单的计时器功能
2017/07/15 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
PyQt5实现画布小程序
2020/05/30 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
中专毕业生自荐信
2013/11/16 职场文书
行政前台岗位职责
2013/12/04 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
早会主持词
2014/03/17 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书