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之unittest
unittest是单元测试的一个框架 在说unittest之前,先说几个概念: TestCase 也就是测试用例 TestSuite 多个测试用例集合在一起,就是TestSuite TestLoade ...
- Stars in Your Window POJ - 2482
错误记录: 题目说输入在int范围内,但是运算过程中可能超int:后来开了很多longlong就过了 #include<cstdio> #include<algorithm> ...
- [已读]HTML5与CSS3设计模式
我想说,不要被书名骗了,其实并没有涉及丁点h5与css3的内容,但是确实称得上比较详细的一本关于css的书.看它的页数就知道了,481~~ 今年上半年看完的,现在想想,觉得自己还是蛮拼的.内容会比较枯 ...
- NTP服务简介
定义:NTP全称为Network Time Protocol,即网络时间协议.是用来使计算机时间同步的一种协议.它可以使计算机对服务器或时钟源做同步,可以提供高精度的时间校正(LAN 上与标准时间小于 ...
- Apache Kylin Cube 的构建过程
不多说,直接上干货! 1. Cube的物理模型 Cube物理模型 如上图所示,一个常用的3维立方体,包含:时间.地点.产品.假如data cell 中存放的是产量,则我们可以根据时间.地点.产品来确定 ...
- Spark MLlib编程API入门系列之特征选择之R模型公式（RFormula）
不多说,直接上干货! 特征选择里,常见的有:VectorSlicer(向量选择) RFormula(R模型公式) ChiSqSelector(卡方特征选择). RFormula用于将数据中的字段通过R ...
- 域名IP主动验证(一)
功能:主动验证给定的域名.IP对是否真正的关联 思路: 1.一开始通过修改hosts文件,把待验证的域名.IP对添加到文件里,然后用wget尝试访问,再恢复hosts文件重新验证下一对 2.后来了解到 ...
- mysql安装及基本概念
1.mysql下载安装 在官网下载5.6版本(越老稳定性越好,现在公司一般都用5.6),选择windows,64bit .下载完解压看bin目录下是否有mysql·exe和mysqld.exe. 解压 ...
- 【HEVC帧间预测论文】P1.8 Complexity Control of High Efficiency Video Encoders for Power-Constrained Devices
参考:Complexity Control of High Efficiency Video Encoders for Power-Constrained Devices <HEVC标准介绍.H ...
- COGS 1. 加法问题 （水体日常）
这是一个经典的入门问题,通过此问题,你可以学会如何使用该评测系统. [问题描述] 现在有两个实数,分别是A和B.请你从文件中读取A和B,计算它们的和A+B,并把它输出到文件中.(保留到整数) [输入格 ...