JS_多選框全選與取消全選的實現

Pop_Rain發表於2017-07-07
原文網址 : https://blog.csdn.net/pop_rain/article/details/74755968
JS
<!DOCTYPE html>
<html>
<head>
<title>15th_test</title>
<meta charset="gb2312">
</head>

<body>
<h1>這是一個標題</h1>
<p>這是一段文字</p>
看書：<input type="checkbox" name="demo" value=1/><br>
寫字：<input type="checkbox" name="demo"  value=2/><br>
打飛機：<input type="checkbox" name="demo" value=3/><br>
玩遊戲：<input type="checkbox" name="demo" value=4/><br>

<button type="button" onclick="allCheck()">全選</button>
<button type="button" onclick="allUnCheck()">取消全選</button>

<script>
function allCheck()
{
	//不可以把name="demo"換成id="demo"，name可以一樣，id不可以一樣
	var dataList = document.getElementsByName("demo");  //注意獲得陣列是getElements,有s
	for(var i=0; i<dataList.length; ++i)
	{
		dataList[i].checked = "checked";
	}
}
function allUnCheck()
{
	var dataList = document.getElementsByName("demo");
	for(var i=0; i<dataList.length; ++i)
	{
		dataList[i].checked = null;
	}
}
</script>
</body>
</html>

output:


相關文章