html全选全不选反选
时间: 2023-11-29 15:47:14 浏览: 90
简单实现全选反选功能(html)
以下是HTML中实现全选、全不选和反选的代码示例:
1. 全选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>全选</title>
<script type="text/javascript">
function selectAll(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = true;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
<input type="checkbox" name="fruit" value="pear">梨子<br>
<input type="button" value="全选" onclick="selectAll()">
</form>
</body>
</html>
```
2. 全不选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>全不选</title>
<script type="text/javascript">
function unselectAll(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = false;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
<input type="checkbox" name="fruit" value="pear">梨子<br>
<input type="button" value="全不选" onclick="unselectAll()">
</form>
</body>
</html>
```
3. 反选效果
```html
<!DOCTYPE html>
<html>
<head>
<title>反选</title>
<script type="text/javascript">
function reverseSelect(){
var checkboxes = document.getElementsByName("fruit");
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = !checkboxes[i].checked;
}
}
</script>
</head>
<body>
<h3>水果列表</h3>
<form>
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<input type="checkbox" name="fruit" value="orange">橙子<br>
<input type="checkbox" name="fruit" value="pear">梨子<br>
<input type="button" value="反选" onclick="reverseSelect()">
</form>
</body>
</html>
```
阅读全文