button样式，checkbox全/反选

最新推荐文章于 2023-03-05 21:31:05 发布

schy_hqh

最新推荐文章于 2023-03-05 21:31:05 发布

阅读量303

点赞数

分类专栏： WEB前端@DHTML 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/schy_hqh/article/details/84508410

版权

WEB前端@DHTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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 οnclick="checkAll(this)">全/反选</button></td>
				</tr>
			</tfoot>
		</table>
	</div>
</body>
</html>

schy_hqh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
button样式，checkbox全/反选

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;歌曲列表&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href=&quot
复制链接

扫一扫