<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03-getElementsByTagName方法.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" target="_blank" rel="external nofollow" >-->
<script type="text/javascript">
// onload事件的函數
function onloadFunc() {
// 通過标簽名，查找指定的标簽對象的集合。
var inputObjs = document.getElementsByTagName("input");
// getElementsByTagName方法傳回的是一個集合，這個集合的操作，
// 跟javascript數組的操作一樣
// alert(inputObjs);
// alert(inputObjs.length);
}
// 全選
function checkAll(){
// alert(1);
// 1.擷取<input type="checkbox" 标簽對象集合
var inputObjs = document.getElementsByTagName("input");
// alert(inputObjs);
// alert(inputObjs.length);
// 2.周遊擷取每一個<input type="checkbox" 标簽對象
for (var i = 0; i < inputObjs.length; i++) {
// 3.修改<input type="checkbox" 标簽對象的checked屬性值為true。
var inputObj = inputObjs[i];
inputObj.checked = true;
}
}
// 全不選
function checkNo() {
// 1.先擷取所有的<input type="checkbox" 的标簽對象的集合。
var inputObjs = document.getElementsByTagName("input");
// 2.周遊擷取每一個<input type="checkbox" 的标簽對象
for (var i = 0; i < inputObjs.length; i++) {
// 3.修改<input type="checkbox" 标簽對象的checked屬性值為false
var inputObj = inputObjs[i];
inputObj.checked = false;
}
}
//反選
function checkReverse(){
// 1.先擷取所有的<input type="checkbox" 的标簽對象的集合。
var inputObjs = document.getElementsByTagName("input");
// 2.周遊擷取每一個<input type="checkbox" 标簽對象
for (var i = 0; i < inputObjs.length; i++) {
// 3.判斷<input type="checkbox" 标簽對象的checked屬性
var inputObj = inputObjs[i];
// if (inputObj.checked) {
// 如果checked屬性值為true，說明目前是選中狀态，需要修改為false值
// inputObj.checked = false;
// } else {
// 如果checked屬性值為false，說明目前未被選中，需要修改值為true
// inputObj.checked = true;
// }
inputObj.checked = !inputObj.checked;
}
}
</script>
</head>
<body onload="onloadFunc();">
興趣愛好：
<input type="checkbox" checked="checked"/>寫代碼
<input type="checkbox" />敲代碼
<input type="checkbox" />看代碼
<input type="checkbox" />背代碼
<button onclick="checkAll();">全選</button>
<button onclick="checkNo();">全不選</button>
<button onclick="checkReverse();">反選</button>
</body>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)