jquery全选,全不选,反选


前台


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Smarty分页程序</title>

<style type='text/css'>
	.news{width:800px;border:1px #369 solid; border-collapse:collapse;}
	.news tr th,.news tr td {border:1px #369 solid; text-align:center;line-height:30px; font-size:12px;}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script>
	$(function(){

		/***********全选,全不选,反选************/

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

			if($(this).prop('checked')){

				$('table input[type=checkbox]').prop('checked',true);			}else{

				$('table input[type=checkbox]').prop('checked',false);

			}
		});		$('#bcd').click(function(){

			$('table input[type=checkbox]').each(function(){

				if ($(this).prop("checked")) {

				 $(this).prop("checked", false);

			  }else {

				 $(this).prop("checked", "checked");

			  }

			});

		});

		/***********全选,全不选,反选************/

	})
</script>

</head>
<body>
	<h1>Smarty分页程序</h1>
	全选:<input id='abc' type="checkbox">
	反选:<input id='bcd' type="checkbox">
	<input type="button" value="删除">
	<table class='news'>
		<tr>
			<th>操作:
			</th>
			<th>编号</th>
			<th>姓名</th>
			<th>内容</th>
			<th>发布时间</th>
		</tr>

		{{foreach from = $data item=v key=k}}
		<tr>
			<td><input type="checkbox"></td>
			<td>{{$v['id']}}</td>
			<td>{{$v['username']}}</td>
			<td>{{$v['content']}}</td>
			<td>{{$v['addtime']}}</td>
		</tr>
		{{/foreach}}
		<tr>
			<td colspan="5">
				<input type='button' id='btnFirst' value='首页'>
				<input type='button' id='btnPrev' value='上一页'>
				<a href='fenye.php?page={$pageNext}'>下一页</a>
				<a href='fenye.php?page={$pageCount}'>末页</a>
			</td>
			
		</tr>
	
	
	</table>
</body>
</html>

posted on 2018-12-31 19:23  夜里码码  阅读(85)  评论(0编辑  收藏  举报

导航