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& ...
随机推荐
- [转].NET MVC 分页以及增删查改
本文转自:http://blog.csdn.net/sust2012/article/details/30761867 . 数据库操作,DAL 层: using System; using Syste ...
- P1789 【Mc生存】插火把
题目背景 初一党应该都知道...... 题目描述 话说有一天linyorson在Mc开了一个超平坦世界,他把这个世界看成一个n*n的方阵,现在他有m个火把和k个萤石,分别放在x1,y1...xm,ym ...
- C#中分部类和分部方法的应用
本篇文章介绍了,C#中分部类和分部方法的应用.需要的朋友参考下 分部类(Partial Class)在C#2.0引入,分部方法(Partial Method)在C#3.0引入,这两个语法特性都 ...
- idea DeBug调试学习
在Intellij IDEA中使用Debug 目录 一.Debug开篇 二.基本用法&快捷键 三.变量查看 四.计算表达式 五.智能步入 六.断点条件设置 七.多线程调试 八.回退断点 九.中 ...
- SpringMvc返回@ResponseBody中文乱码
使用SpringMvc的@ResponseBody返回指定数据的类型做为http体向外输出,在浏览器里返回的内容里有中文,会出现乱码,项目的编码.tomcat编码等都已设置成utf-8,如下返回的是一 ...
- sql server 2012 从删库到跑路
问题: 向sql server 2012单个数据库中导入1500万+条数据的时候,报错: 错误 0xc0202009: 数据流任务 1: SSIS 错误代码 DTS_E_OLEDBERROR.出现 O ...
- XML基本概念及增删改查操作
一.概念及特征: 1. XML 指可扩展标记语言(Extensible Markup Language),用户可以自己定义标签.XML 被设计用来传输和存储数据,而 HTML 用于格式化并显示数据,并 ...
- Tomcat和搜索引擎网络爬虫的攻防
不知道广大程序员朋友们注意到一个现象么?使用百度是无法搜索到淘宝网的网页.为什么会造成这种现象?这就要从网络爬虫说起了. 咱们程序员假如自己搭设个人网站,在上面分享少量自己的技术文章,面临的一个重要问 ...
- 【整理】 vue-cli 打包后显示favicon.ico小图标
vue-cli 打包后显示favicon.ico小图标 https://www.cnblogs.com/mmzuo-798/p/9285013.html
- Java文件编译与反编译:javac命令和javap命令
1.创建一个Test.java文件,并输入内容 public class Test{ private int m; public int inc(){ return m + 1; } } 2.使用ja ...