<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/*获取表单里的元素可以使用getElementsByName()方法，该方法返回的也是元素对象集合。
复选框对象的checked属性操作其是否被选，值是true表示被选，值是false表示没有被选。
根据以上提示，实现三个按钮的对应功能。*/
window.onload = function(){
var selectall = document.getElementById('all');
var selectno = document.getElementById('allNo');
var selectInvert = document.getElementById('noCheck');
var checkboxs = document.getElementsByName('hobby');
selectall.onclick = All;
selectno.onclick = No;
selectInvert.onclick = Invert;
function All(){
for(var i=0; i<checkboxs.length;i++){
checkboxs[i].checked = true;
}
}
function No(){
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked = false;
}
}
function Invert(){
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked == true){
checkboxs[i].checked = false;
}else if(checkboxs[i].checked == false){
checkboxs[i].checked = true;
}
}
}
}
</script>
</head>
<body>
<form action="">
<input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br>
<input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >足球<Br>
<input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br>
<input type="checkbox" name="hobby" id="wqiu" value="wqiu">网球<Br>
<input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br>
<input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br>
<input type="checkbox" name="hobby" id="ymq" value="ymq">羽毛球<Br>
<input type="button" name="selectAll" id="all" value='全选'>
<input type="button" name="selectNo" id="allNo" value='全不选'>
<input type="button" name="selectInvert" id="noCheck" value='反选'>
</form>
</body>
</html>
