jQuery操作checkbox选择(list/table)


Posted in Javascript onApril 07, 2013

1、checkbox list选择

效果图:

jQuery操作checkbox选择(list/table)

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
// 全选 
$("#btnCheckAll").bind("click", function () { 
$("[name = chkItem]:checkbox").attr("checked", true); 
}); 
// 全不选 
$("#btnCheckNone").bind("click", function () { 
$("[name = chkItem]:checkbox").attr("checked", false); 
}); 
// 反选 
$("#btnCheckReverse").bind("click", function () { 
$("[name = chkItem]:checkbox").each(function () { 
$(this).attr("checked", !$(this).attr("checked")); 
}); 
}); 
// 全不选 
$("#btnSubmit").bind("click", function () { 
var result = new Array(); 
$("[name = chkItem]:checkbox").each(function () { 
if ($(this).is(":checked")) { 
result.push($(this).attr("value")); 
} 
}); 
alert(result.join(",")); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<input name="chkItem" type="checkbox" value="今日话题" />今日话题 
<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点 
<input name="chkItem" type="checkbox" value="财经" />财经 
<input name="chkItem" type="checkbox" value="汽车" />汽车 
<input name="chkItem" type="checkbox" value="科技" />科技 
<input name="chkItem" type="checkbox" value="房产" />房产 
<input name="chkItem" type="checkbox" value="旅游" />旅游 
</div> 
<div> 
<input id="btnCheckAll" type="button" value="全选" /> 
<input id="btnCheckNone" type="button" value="全不选" /> 
<input id="btnCheckReverse" type="button" value="反选" /> 
<input id="btnSubmit" type="button" value="提交" /> 
</div> 
</body> 
</html>

2、checkbox table选中

效果图:

jQuery操作checkbox选择(list/table)

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
table 
{ 
border-collapse: collapse; 
} 
td 
{ 
border: 1px solid #ccc; 
} 
</style> 
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
// chkAll全选事件 
$("#chkAll").bind("click", function () { 
$("[name = chkItem]:checkbox").attr("checked", this.checked); 
}); 
// chkItem事件 
$("[name = chkItem]:checkbox").bind("click", function () { 
var $chk = $("[name = chkItem]:checkbox"); 
$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length); 
}) 
}); 
</script> 
</head> 
<body> 
<table id="tb"> 
<thead> 
<tr> 
<td> 
<input id="chkAll" type="checkbox" /> 
</td> 
<td> 
分类名称 
</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="今日话题" /> 
</td> 
<td> 
今日话题 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="视觉焦点" /> 
</td> 
<td> 
视觉焦点 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="财经" /> 
</td> 
<td> 
财经 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="汽车" /> 
</td> 
<td> 
汽车 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="科技" /> 
</td> 
<td> 
科技 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="房产" /> 
</td> 
<td> 
房产 
</td> 
</tr> 
<tr> 
<td> 
<input name="chkItem" type="checkbox" value="旅游" /> 
</td> 
<td> 
旅游 
</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解如何在react中搭建d3力导向图
Jan 12 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 #Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 #Javascript
如何在一个页面显示多个百度地图
Apr 07 #Javascript
关于JS字符串函数String.replace()
Apr 07 #Javascript
You might like
PHP 命令行参数详解及应用
2011/05/18 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Add a Table to a Word Document
2007/06/15 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
python实现简单温度转换的方法
2015/03/13 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
《雕塑之美》教学反思
2014/04/24 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
医院见习报告范文
2014/11/03 职场文书
2015年商场工作总结
2015/04/27 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
导游词之四川武侯祠
2019/10/21 职场文书