JavaScript学习笔记
3 复选框的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框的应用</title>
<!-- 实现复选框的全选 全不选 反选功能-->
<script type="text/javascript">
//全选
function checkAll() {
var all = document.getElementsByName("likes");
for (var i=0;i<all.length;i++){
all[i].checked = true;
}
}
//全不选
function checkNo() {
var all = document.getElementsByName("likes");
for (var i=0;i<all.length;i++){
all[i].checked = false;
}
}
//反选
function checkReverse() {
var all = document.getElementsByName("likes");
for (var i=0;i<all.length;i++){
all[i].checked = !all[i].checked ;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="likes" checked=""/>
<input type="checkbox" name="likes" checked=""/>
<input type="checkbox" name="likes" checked=""/>
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>