<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
select{
margin-left: 100px;
}
</style>
</head>
<body>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<input type="checkbox" name="fruit" value="1"><br/>
<button type="button" onclick="selectAll()">全选</button>
<button type="button" onclick="unSelectAll()">全不选</button>
<button type="button" onclick="converSelectAll()">反选</button>
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
function selectAll(){
for(var i = 0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
function unSelectAll(){
for(var i = 0;i<inputs.length;i++){
inputs[i].checked = false;
}
}
function converSelectAll(){
for(var i = 0;i<inputs.length;i++){
if(inputs[i].checked){
inputs[i].checked = false;
}else{
inputs[i].checked = true;
}
}
}
</script>
</body>
</html>