DMO方法之getElementsByName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
var hobby = document.getElementsByName("hobby"); //根据指定的name来返回多个对象集合
//checked表示复选框的选中状态 选中是true 不选中是false
for (var i = 0; i < hobby.length; i++) {
hobby[i].checked = true;
}
}
//全不选
function checkNo() {
var hobby = document.getElementsByName("hobby");
for (var i = 0; i < hobby.length; i++){
hobby[i].checked = false;
}
}
//反选
function checkReverse() {
var hobby = document.getElementsByName("hobby");
for (var i = 0; i < hobby.length; i++) {
if (hobby[i].checked == true) {
hobby[i].checked = false;
}else {
hobby[i].checked = true
}
}
}
</script>
</head>
<body>
兴趣爱好,
<input type="checkbox" name="hobby" value="cpp">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">js
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>