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使用parseInt解析数字实现求和的方法
Aug 05 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue项目中使用rem,在入口文件添加内容操作
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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP7常量数组用法分析
2016/09/26 PHP
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python求出0~100以内的所有素数
2018/01/23 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python模块相关知识点小结
2020/03/09 Python
python实现IOU计算案例
2020/04/12 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
思想品德自我鉴定
2013/10/12 职场文书
项目资料员岗位职责
2013/12/10 职场文书
元宵节主持词
2014/03/25 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
小学生读书活动总结
2014/06/30 职场文书
2014年财务部工作总结
2014/11/11 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
采购内勤岗位职责
2015/04/13 职场文书
文艺晚会开场白
2015/05/29 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL