checkbox全选功能javascript实现

最新推荐文章于 2024-05-14 02:37:54 发布

Hi_JohnsonYu

最新推荐文章于 2024-05-14 02:37:54 发布

阅读量277

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/yuqixiansheng/article/details/48710401

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>

<html>
	<head>
		<style>
			table, th{
				border: 1px solid black;
			}

			thead {
				background-color: green;
				color: white;
			}

			/*tr:nth-child(even) {background: #CCC}
			tr:nth-child(odd) {background: #FFF}*/
		</style>
		<script>

			function selectedAll()
			{
				var checkBox = document.getElementById("QueryAll");
				var checkBoxAll = document.getElementsByName("hobbies");
				var count = 0;
				for(var i = 0 ; i < checkBoxAll.length ; i++)
				{
					checkBoxAll[i].checked = checkBox.checked;
				}

			}

			function checkIsAllSeleced()
			{
				var checkBoxAll = document.getElementsByName("hobbies");
				var count = 0;
				for(var i = 0 ; i < checkBoxAll.length ; i++)
				{
					if(checkBoxAll[i].checked)
						count ++;
					else
					    break;
				}

				document.getElementById("QueryAll").checked = (count == checkBoxAll.length);
			}
		</script>
	</head>

	<body>

		<table width = '80%' border = '1' cellspacing = '0'>
			<thead>
				<td width = '2%'><input type = 'checkbox' id ='QueryAll' onclick = 'selectedAll();'/></td>
				<td>title</td>
			</thead>
		
			<tr>
				<td><input type = 'checkbox' value = '1' name = 'hobbies' onclick = 'checkIsAllSeleced();'/></td>
				<td>123123</td>
			</tr>

			<tr>
				<td><input type = 'checkbox' value = '2' name = 'hobbies' onclick = 'checkIsAllSeleced();'/></td>
				<td>123123</td>
			</tr>

			<tr>
				<td><input type = 'checkbox' value = '3' name = 'hobbies' onclick = 'checkIsAllSeleced();'/></td>
				<td>123123</td>
			</tr>

			<tr>
				<td><input type = 'checkbox' value = '4' name = 'hobbies' onclick = 'checkIsAllSeleced();'/></td>
				<td>123123</td>
			</tr>

			<tr>
				<td><input type = 'checkbox' value = '5' name = 'hobbies' onclick = 'checkIsAllSeleced();'/></td>
				<td>123123</td>
			</tr>
		</table>
	</body>
</html>