button样式，checkbox全/反选

schy_hqh

浏览: 558333 次
性别:

最近访客更多访客>>

amo

yjheeq

yclovesun

yangjiancsdn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB前端@DHTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歌曲列表</title>

<link rel="stylesheet" type="text/css" href="table.css">

<style type="text/css">
	/*按钮样式定义*/
	button{
	 background:#F0F0F0;
	 border-top:1px solid #708090;
	 border-right:1px solid #708090;
	 border-bottom:1px solid #708090;
	 border-left:1px solid #708090; 
	 width:80px;
	 height:auto;
	 font-size:10pt;
	 cursor: help;/*wait 等待; help 问号*/
	}
</style>

<script type="text/javascript">
	function checkAll(btn){
		//获取table中所有的checkbox
		var collMusics = document.getElementById("music");
		var oRows = collMusics.rows;
		//遍历每一行 
		for(var i=1;i<oRows.length-1;i++) {
			//获取行的列集合中的第1个td节点对象  
			var oTd = oRows[i].cells[0];
			//根据标签名从td中获取checkbox节点对象 
			var ckb = oTd.getElementsByTagName("input")[0];
			ckb.checked = !ckb.checked;//将checked属性进行取反
		}
	}
</script>
</head>
<body>
	<div>
		<table id="music">
			<tbody>
				<tr>
					<th>歌曲名称</th>
					<th>演唱者</th>
				</tr>
				<tr>
					<td><input type="checkbox"/>红玫瑰 </td>
					<td>陈奕迅</td>
				</tr>
				<tr>
					<td><input type="checkbox"/>童年</td>
					<td>罗大佑</td>
				</tr>
				<tr>
					<td><input type="checkbox"/>明明白白我的心</td>
					<td>成功</td>
				</tr>
				<tr>
					<td><input type="checkbox"/>月亮代表我的心</td>
					<td>邓丽君</td>
				</tr>
				<tr>
					<td><input type="checkbox"/>其实你不懂我的心</td>
					<td>童安格</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="center"><button onclick="checkAll(this)">全/反选</button></td>
				</tr>
			</tfoot>
		</table>
	</div>
</body>
</html>