jquery中的全选，全不选
<!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>
<title>数据管理</title>
<script type="text/javascript"
src="Jscript/jquery-1.8.2.min.js">
</script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand}
table tr td span{float:left;padding-left:12px;}
table tr th{background-color:#ccc;height:32px}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px; background-color:#eee;display:none}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript" >
$(function() {
$("table tr:nth-child(odd)").css("background-color", "#eee"); //隔行变色 /**全选复选框单击事件**/
/*$("#chkAll").click(function() {
if (this.checked) {//如果自己被选中
$("table tr td input[type=checkbox]").attr("checked", true);
}
else {//如果自己没有被选中
$("table tr td input[type=checkbox]").attr("checked", false);
}
})*/ /**全选复选框单击事件**/
$("#chkAll").click(function() {
if (this.checked) {
$("input[type=checkbox]").attr("checked",true);
} else {
$("input[type=checkbox]").attr("checked",false);
}
}); $("input.Checkbox").click(function() {//当其他的checkbox发生鼠标点击时
var result = 0;//声明一个表示结果的变量
$("input.Checkbox").each(function() {//遍历其他的checkbox
if (!this.checked) {//如果其中有没选中的checkbox
result += 1;//结果+1
}
});
if (result == 0) {//如果结果等于0表示所有的checkbox都已经勾选
$("#chkAll").attr("checked", true);//全选的checkbox自动勾选
} else {//如果结果不等于0表示还有checkbox没有勾选
$("#chkAll").attr("checked", false);//全选的checkbox不勾选
}
}); /**删除按钮单击事件**/
$("#btnDel").click(function() {
var intL = $("table tr td input:checked:not('#chkAll')").length; //获取除全选复选框外的所有选中项
if (intL != 0) {//如果有选中项
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {//遍历除全选复选框外的行
if (this.checked) {//如果选中
$("table tr[id=" + this.value + "]").remove(); //获取选中的值，并删除该值所在的行
}
})
}
}) /**小图片鼠标移动事件**/
var x = 5; var y = 15;//初始化提示图片位置
$("table tr td img").mousemove(function(e) {
$("#imgTip")
.attr("src", this.src)//设置提示图片scr属性
.css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })//设置提示图片的位置
.show(3000);//显示图片
}) /**小图片鼠标移出事件**/
$("table tr td img").mouseout(function() {
$("#imgTip").hide();//隐藏图片
}) })
</script>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input class="Checkbox" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="Images/img03.jpg" alt="" /></td>
<td>李小明</td>
<td>男</td>
<td>35.60 元</td>
</tr>
<tr id="1">
<td><input class="Checkbox" type="checkbox" value="1"/></td>
<td>1002</td>
<td><img src="Images/img04.jpg" alt="" /></td>
<td>刘明明</td>
<td>女</td>
<td>37.80 元</td>
</tr>
<tr id="2">
<td><input class="Checkbox" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt="" /></td>
<td>张小星</td>
<td>女</td>
<td>45.60 元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span><input id="chkAll" type="checkbox" />全选</span>
<span><input id="btnDel" type="button" value="删除" class="btn" /></span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif"/>
</body>
</html>
jquery中的全选，全不选的更多相关文章
- Jquery中的prop()方法 全选或全不选
注意: prop()在高版本才会有效, 低版本用attr(); $(function(){ // 元素checkbox var aChecked = $('.checkGoods'); // 全选 v ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- 在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
- Jquery 遍历 Table；遍历CheckBox ；遍历Select；全选/全不选
关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table id="thistab"> < ...
- Java 多选框的全选、多选、反选（JQuery 实现）
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
- GridView中实现CheckBox的全选
GridView中实现CheckBox的全选 用服务器端的方法: 在页面上放一个gridview控件,配置好数据源,编辑列, <asp:GridView ID="GridView1&q ...
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
随机推荐
- python之sys.argv[]
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键.因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可以看作是一个列表,所 ...
- Python实现两已知排好序的列表合并成一个排好序的列表
#方法0.5--- lst1 = [1, 3, 7, 9, 12] lst2 = [4, 8, 9, 13, 15, 19] def merge(a, b): c = [] h = j = 0 whi ...
- Codeforces 1144F（二分染色）
发现奇环不可行,偶环可行,考虑二分图.然后染色,方向全都从一种指向另一种就可以了,随意. ; int n, m, color[maxn]; vector<int> vc[maxn]; ve ...
- [WOJ1318]和最大
题目链接: WOJ1318 题目分析: 首先我们要知道当这是一个线性的序列的时候应该怎么做:最大子序和 这里是线性的,就把数组复制两遍即可 好像有些细节要处理(也可能是我代码写丑了),具体的都在代码里 ...
- 7.2 Collection和Iterator接口
- 477 Total Hamming Distance 汉明距离总和
两个整数的 汉明距离 指的是这两个数字的二进制数对应位不同的数量.计算一个数组中,任意两个数之间汉明距离的总和.示例:输入: 4, 14, 2输出: 6解释: 在二进制表示中,4表示为0100,14表 ...
- hashTable 和 hashMap的区别
HashMap是Hashtable的轻量级实现(非线程安全的实现),他们都完成了Map接口,HashMap把Hashtable的contains方法去掉了,改成containsvalue和contai ...
- 关于margin、padding 对内联元素的影响
内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测 ...
- 数据源引用 java:/comp/env
编辑 删除 数据源引用 java:/comp/env 2012-01-28 15:59 ENC的概念: The application component environment is ref ...
- jmeter+ant+jenkins
前提:需要先配置下面两个环境,严格按照本人的配置去配,要不然后面你会看不懂 (1)ant+jmeter集成:http://blog.csdn.net/qq_23101033/article/detai ...