function checkAll(){
for(i=0;i<document.getElementsByName("hobby").length;i++){
document.getElementsByName("hobby")[i].checked="checked";
}
}
function inverse(){
for(i=0;i<document.getElementsByName("hobby").length;i++){
// document.getElementsByName("hobby")[i].checked?document.getElementsByName("hobby")[i].checked=false:document.getElementsByName("hobby")[i].checked=true;
if(document.getElementsByName("hobby")[i].checked==true){
document.getElementsByName("hobby")[i].checked=false;
}else{
document.getElementsByName("hobby")[i].checked=true;
}
}
}
function cancel(){
for(i=0;i<document.getElementsByName("hobby").length;i++){
document.getElementsByName("hobby")[i].checked=false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<input type="checkbox" name="hobby">香蕉<br>
<input type="checkbox" name="hobby">苹果<br>
<input type="checkbox" name="hobby">大西瓜<br>
<input type="button" onclick="checkAll()" value="全选"><br>
<input type="button" onclick="inverse()" value="反选"><br>
<input type="button" onclick="cancel()" value="取消"><br>
</body>
</html>
function checkAll(){
for(var i=0,checkBoxHobbyArray=document.getElementsByName("hobby"),checkBoxHobbyArray_length=checkBoxHobbyArray.length;i<checkBoxHobbyArray_length;i++){
checkBoxHobbyArray[i].checked=true;
}
}
function inverse(){
for(var i=0,checkBoxHobbyArray=document.getElementsByName("hobby"),checkBoxHobbyArray_length=checkBoxHobbyArray.length;i<checkBoxHobbyArray_length;i++){
if(checkBoxHobbyArray[i].checked==true){
checkBoxHobbyArray[i].checked=false;
}else{
checkBoxHobbyArray[i].checked=true;
}
}
}
function cancel(){
for(var i=0,checkBoxHobbyArray=document.getElementsByName("hobby"),checkBoxHobbyArray_length=checkBoxHobbyArray.length;i<checkBoxHobbyArray_length;i++){
checkBoxHobbyArray[i].checked=false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<input type="checkbox" name="hobby">香蕉<br>
<input type="checkbox" name="hobby">苹果<br>
<input type="checkbox" name="hobby">大西瓜<br>
<input type="button" onclick="checkAll()" value="全选"><br>
<input type="button" onclick="inverse()" value="反选"><br>
<input type="button" onclick="cancel()" value="取消"><br>
</body>
</html>
var checkBoxHobbyArray=document.getElementsByName("hobby");
var checkBoxHobbyArray_length=checkBoxHobbyArray.length;
function checkAll(){
for(var i=0;i<checkBoxHobbyArray_length;i++){
checkBoxHobbyArray[i].checked=true;
}
}
function inverse(){
for(var i=0;i<checkBoxHobbyArray_length;i++){
if(checkBoxHobbyArray[i].checked==true){
checkBoxHobbyArray[i].checked=false;
}else{
checkBoxHobbyArray[i].checked=true;
}
}
}
function cancel(){
for(var i=0;i<checkBoxHobbyArray_length;i++){
checkBoxHobbyArray[i].checked=false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" name="hobby">香蕉<br>
<input type="checkbox" name="hobby">苹果<br>
<input type="checkbox" name="hobby">大西瓜<br>
<input type="button" onclick="checkAll()" value="全选"><br>
<input type="button" onclick="inverse()" value="反选"><br>
<input type="button" onclick="cancel()" value="取消"><br>
<script type="text/javascript" src="script.js"></script>
</body>
</html>