Jquery 实现全选反选功能
2013-04-22 17:08
736 查看
<!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>
<style type="text/css">
table img
{
width:50px; height:50px;
}
table
{
width:600px; height:400px;
}
table tr td{ border:solid 1px #eee;}
#img1
{
position:absolute;width:200px;height:200px;display:none;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#chkall').click(function () {
/*if ($(this).is(':checked') == true) {
$('table input[type=checkbox]').attr('checked', true);
}
else {
$('table input[type=checkbox]').attr('checked', false);
}*/
//简单写法
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#sp1').text('取消全选');
}
else {
$('#sp1').text('全选');
}
//alert($('#chkall').attr('checked'));
//另一种方法，使用js获取全选复选框的选中状态
//$('table input[type=checkbox]').attr('checked',this.checked);
})
$('#chkrevert').click(function () {
//方法1：
/*var allcheck = $('table input[type=checkbox]');
for (var i = 0; i < allcheck.length; i++) {
if (allcheck[i].checked) {
allcheck[i].checked = false;
}
else {
allcheck[i].checked = true;
}
}*/
var allcheck = $('table input[type=checkbox]');
allcheck.each(function () {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('table img').mousemove(function (e) {
$('.imgclass').attr('src', $(this).attr('src'));
$('.imgclass').css('top', e.pageY + 0);
$('.imgclass').css('left', e.pageX + 50);
$('.imgclass').show();
})
$('table img').mouseleave(function () {
$('.imgclass').hide();
})
})
</script>
</head>
<body>
<img src="" id="img1" class="imgclass"/>
<div>
<input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div>
<table>
<tr>
<td>
操作
</td>
<td>
编号
</td>
<td>
名称
</td>
<td>
作者
</td>
<td>
封面
</td>
<td>
单价
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
001
</td>
<td>
三国演义
</td>
<td>
罗贯中
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
45
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
002
</td>
<td>
西游记
</td>
<td>
吴承恩
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
40
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
003
</td>
<td>
水浒传
</td>
<td>
施耐庵
</td>
<td>
<img src="images/4.jpg" />
</td>
<td>
50
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
004
</td>
<td>
红楼梦
</td>
<td>
曹雪芹
</td>
<td>
<img src="images/5.jpg" />
</td>
<td>
100
</td>
</tr>
<tr>
<td>
<input id="Checkbox5" type="checkbox" />
</td>
<td>
005
</td>
<td>
家
</td>
<td>
巴金
</td>
<td>
<img src="images/6.jpg" />
</td>
<td>
45
</td>
</tr>
<tr>
<td>
<input id="Checkbox6" type="checkbox" />
</td>
<td>
006
</td>
<td>
茶馆
</td>
<td>
老舍
</td>
<td>
<img src="images/7.jpg" />
</td>
<td>
35
</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table img
{
width:50px; height:50px;
}
table
{
width:600px; height:400px;
}
table tr td{ border:solid 1px #eee;}
#img1
{
position:absolute;width:200px;height:200px;display:none;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#chkall').click(function () {
/*if ($(this).is(':checked') == true) {
$('table input[type=checkbox]').attr('checked', true);
}
else {
$('table input[type=checkbox]').attr('checked', false);
}*/
//简单写法
$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
if (this.checked) {
$('#sp1').text('取消全选');
}
else {
$('#sp1').text('全选');
}
//alert($('#chkall').attr('checked'));
//另一种方法，使用js获取全选复选框的选中状态
//$('table input[type=checkbox]').attr('checked',this.checked);
})
$('#chkrevert').click(function () {
//方法1：
/*var allcheck = $('table input[type=checkbox]');
for (var i = 0; i < allcheck.length; i++) {
if (allcheck[i].checked) {
allcheck[i].checked = false;
}
else {
allcheck[i].checked = true;
}
}*/
var allcheck = $('table input[type=checkbox]');
allcheck.each(function () {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
}
else {
$(this).attr('checked', true);
}
})
})
$('table img').mousemove(function (e) {
$('.imgclass').attr('src', $(this).attr('src'));
$('.imgclass').css('top', e.pageY + 0);
$('.imgclass').css('left', e.pageX + 50);
$('.imgclass').show();
})
$('table img').mouseleave(function () {
$('.imgclass').hide();
})
})
</script>
</head>
<body>
<img src="" id="img1" class="imgclass"/>
<div>
<input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div>
<table>
<tr>
<td>
操作
</td>
<td>
编号
</td>
<td>
名称
</td>
<td>
作者
</td>
<td>
封面
</td>
<td>
单价
</td>
</tr>
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
<td>
001
</td>
<td>
三国演义
</td>
<td>
罗贯中
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
45
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" type="checkbox" />
</td>
<td>
002
</td>
<td>
西游记
</td>
<td>
吴承恩
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
40
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
<td>
003
</td>
<td>
水浒传
</td>
<td>
施耐庵
</td>
<td>
<img src="images/4.jpg" />
</td>
<td>
50
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
<td>
004
</td>
<td>
红楼梦
</td>
<td>
曹雪芹
</td>
<td>
<img src="images/5.jpg" />
</td>
<td>
100
</td>
</tr>
<tr>
<td>
<input id="Checkbox5" type="checkbox" />
</td>
<td>
005
</td>
<td>
家
</td>
<td>
巴金
</td>
<td>
<img src="images/6.jpg" />
</td>
<td>
45
</td>
</tr>
<tr>
<td>
<input id="Checkbox6" type="checkbox" />
</td>
<td>
006
</td>
<td>
茶馆
</td>
<td>
老舍
</td>
<td>
<img src="images/7.jpg" />
</td>
<td>
35
</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery实现列表中复选框全选反选功能封装
- JQuery实现全选、全不选和反选功能
- jquery实现全选/反选功能
- 基于jQuery实现复选框的全选 全不选 反选功能
- js, jQuery实现全选、反选功能
- Jquery之实现全选反选功能
- jquery实现简单的全选和反选功能
- 功能选中jquery实现全选反选功能
- jQuery实现全选反选功能
- JQuery实现全选,不选，反选功能
- jquery实现全选、全消、反选功能
- 关于用jQuery实现的checkbox全选和反选功能
- jQuery实现checkbox列表的全选、反选功能
- jQuery实现全选于反选功能
- 基于jQuery实现复选框的全选 全不选 反选功能
- jquery实现简单的全选和反选功能
- Jquery实现全选反选功能
- jquery实现全选反选功能
- JQuery学习(4)全选反选功能的实现
- 使用jquery实现全选,全不选,反选功能