html使用js操作进行兴趣全选的代码
时间: 2023-12-29 18:05:54 浏览: 60
js实现全选
以下是一个简单的 HTML 页面,其中包含一个“全选”复选框和一组兴趣爱好复选框。当用户选中“全选”复选框时,所有兴趣爱好复选框都会被选中。当用户取消选中“全选”复选框时,所有兴趣爱好复选框都会取消选中。
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function selectAll() {
var checkboxes = document.getElementsByName("interest");
var selectAllCheckbox = document.getElementById("selectAll");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = selectAllCheckbox.checked;
}
}
</script>
</head>
<body>
<h1>兴趣爱好</h1>
<label for="selectAll"><input type="checkbox" id="selectAll" onclick="selectAll()">全选</label><br>
<label for="interest1"><input type="checkbox" name="interest" id="interest1">篮球</label><br>
<label for="interest2"><input type="checkbox" name="interest" id="interest2">足球</label><br>
<label for="interest3"><input type="checkbox" name="interest" id="interest3">电影</label><br>
<label for="interest4"><input type="checkbox" name="interest" id="interest4">音乐</label><br>
</body>
</html>
```
在上面的代码中,我们定义了一个名为 `selectAll` 的 JavaScript 函数。该函数会获取所有名为 `interest` 的复选框,并将它们的 `checked` 属性设置为“全选”复选框的 `checked` 属性。当用户单击“全选”复选框时,会调用该函数。
阅读全文