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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
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手册及PHP编程标准
2006/12/17 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
自动一体化专业求职信
2014/03/15 职场文书
创意广告词
2014/03/17 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
实习协议书范本
2014/04/22 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
青岛海底世界导游词
2015/02/11 职场文书
同意落户证明
2015/06/19 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
js中Object.create实例用法详解
2021/10/05 Javascript