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& ...
随机推荐
- C++11六大函数（构造函数，移动构造函数，移动赋值操作符，复制构造函数，赋值操作符，析构函数）
在C++中,有三大函数复制控制(复制构造函数,赋值操作符,析构函数),而在C++11中,加入了移动构造函数,移动赋值操作符.我就斗胆将他们命名为六大函数好了. 一.构造函数 c++primer中说过: ...
- 移动端rem.js的使用方法
下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...
- linux虚拟机时间不准的问题
如果时区不准, 使用tzselect命令(timezone选择),选择北京时间.然后把输出的命令写入/etc/profile.d/time.sh里. 然后用crontab写定时任务,每天执行一次. 3 ...
- 用eclipse-inst-win64.exe安装eclipse出现Java for Windows Missing 的原因
Java for Windows Missing 因为jdk的版本没有对,我这里是64位的机器上安了32位的jdk,所以一直报这个. 必须换上相对应版本的jdk,提示页面有链接,直接点击就可以下载. ...
- Suricata的配置
见官网 https://suricata.readthedocs.io/en/latest/configuration/index.html# Docs » 8. Configuration Edit ...
- Python实现决策树ID3算法
主要思想: 0.训练集格式:特征1,特征2,...特征n,类别 1.采用Python自带的数据结构字典递归的表示数据 2.ID3计算的信息增益是指类别的信息增益,因此每次都是计算类别的熵 3.ID3每 ...
- MyBatis -- 必知必会
MyBatis的前身是Apache的一个开源项目iBatis,2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis.201 ...
- P3374 【模板】树状数组 1 单点修改与区间查询
题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...
- 第3章 接口与API设计 52条笔记
第3章 接口与API设计 52条笔记 第15条: 用前缀避免命名空间冲突 Objective-C 没有其他语言那种内置的命名空间机制 .鉴于此,我们在起名时要设法避免潜在的命名冲突,否则很容易就重名了 ...
- windows 查看某端口被占用情况
百度经验 http://jingyan.baidu.com/article/3c48dd34491d47e10be358b8.html 基本命令 netstat -ano