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下过滤数组重复值的代码
Sep 10 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
js实现图片360度旋转
Jan 22 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JS中Map和ForEach的区别
Feb 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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
javascript读写json示例
2014/04/11 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
selenium+python实现自动登录脚本
2018/04/22 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
python对日志进行处理的实例代码
2018/10/06 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python实现桌面壁纸切换功能
2019/01/21 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
项目开发计划书
2014/01/09 职场文书
公司员工检讨书
2014/02/08 职场文书
市场营销专业自荐书
2014/06/10 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年班干部工作总结
2014/11/25 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书