jQuery实现全选于反选功能

发布时间:2017-09-02 15:50:03
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>

<style type="text/css">

table img

{

width:50px; height:50px;

}

table

{

width:600px; height:400px;

}

table tr td{ border:solid 1px #eee;}

</style>

<script src="Jquery1.7.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$('#chkall').click(function () {

$('table input[type=checkbox]').attr('checked', $(this).is(':checked'));

if (this.checked) {

$('#sp1').text('取消全选');

}

else {

$('#sp1').text('全选');

}

})

$('#chkrevert').click(function () {

var allcheck = $('table input[type=checkbox]');

allcheck.each(function () {

if ($(this).is(':checked')) {

$(this).attr('checked', false);

}

else {

$(this).attr('checked', true);

}

})

})

})

</script>

</head>

<body>

<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>



,站群,站群系统

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站设计 http://www.feimao666.com