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 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
vue与iframe之间的信息交互的实现
Apr 08 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 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操作Memcache实例介绍
2013/06/14 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
vue跨域解决方法
2017/10/15 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现合并字典的方法
2015/07/07 Python
Golang与python线程详解及简单实例
2017/04/27 Python
python实现简单遗传算法
2018/03/19 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
会计顶岗实习心得
2014/01/25 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
婚庆主持词大全
2015/06/30 职场文书
python实现剪贴板的操作
2021/07/01 Python