html复选框全选和取消全选
时间: 2023-12-23 14:54:17 浏览: 46
可以使用JavaScript实现复选框的全选和取消全选功能。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>复选框全选/取消全选示例</title>
<script type="text/javascript">
function selectAll(source) {
checkboxes = document.getElementsByName('items');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<h2>复选框全选/取消全选示例</h2>
<form>
<input type="checkbox" onClick="selectAll(this)" />全选/取消全选
<br/><br/>
<input type="checkbox" name="items" value="item1" />选项1
<br/>
<input type="checkbox" name="items" value="item2" />选项2
<br/>
<input type="checkbox" name="items" value="item3" />选项3
</form>
</body>
</html>
```
在上面的示例中,我们首先定义了一个JavaScript函数`selectAll()`,该函数接受一个参数`source`,表示全选/取消全选复选框的状态。在函数中,我们使用`document.getElementsByName()`方法获取所有的`name`属性为`items`的复选框,然后遍历这些复选框,将它们的`checked`属性设置为`source.checked`,即全选/取消全选复选框的状态。最后,在HTML中,我们通过`onClick`属性将全选/取消全选复选框的状态传递给`selectAll()`函数。