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 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
javascript RegExp 使用说明
May 21 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
关于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
使用eAccelerator加密PHP程序
2008/10/03 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP制作用户注册系统
2015/10/23 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
javascript实现计时器的简单方法
2016/02/21 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
python发腾讯微博代码分享
2014/01/10 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python调用c++传递数组的实例
2019/02/13 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
竞聘书格式及范文
2014/03/31 职场文书
广播节目策划方案
2014/05/23 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
如何在Python项目中引入日志
2021/05/31 Python