选择爱好，包含全选和全不选效果
功能说明
实现一个爱好选择功能，包含三个复选框（足球、篮球、乒乓球）和一个按钮，点击按钮可以在"全选"和"全不选"状态之间切换。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱好选择</title>
<style>
#btn1{
height: 35px;
width: 100px;
}
</style>
<script>
window.onload = function() {
// 用getElementsByName获取所有爱好复选框
var aiHaoShuZu = document.getElementsByName("aiHaoName");
// 获取按钮元素（页面中第四个input元素）
var anNiuShuZu = document.getElementsByTagName("input")[3];
// 为按钮添加点击事件
anNiuShuZu.onclick = function() {
// 判断按钮当前状态是"全选"还是"全不选"
if(this.value == "全选") {
// 遍历所有爱好复选框，设置为选中状态
for(var i of aiHaoShuZu) {
i.checked = "true";
}
// 将按钮文本改为"全不选"
this.value = "全不选";
}
// 如果当前是"全不选"状态
else if(this.value == "全不选") {
// 遍历所有爱好复选框，取消选中状态
for(var i of aiHaoShuZu) {
i.checked = "";
}
// 将按钮文本改回"全选"
this.value = "全选";
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="aiHaoName" />足球
<input type="checkbox" name="aiHaoName" />篮球
<input type="checkbox" name="aiHaoName" />乒乓球
<input type="button" value="全选" />
</body>
</html>
关键技术点解析
元素获取方法：
- 使用
getElementsByName("aiHaoName")获取所有爱好复选框，因为它们有相同的name属性 - 使用
getElementsByTagName("input")[3]获取按钮元素，通过索引定位到第四个input元素
- 使用
复选框状态控制：
- 复选框的
checked属性用于控制其选中状态 - 设置
checked = "true"使复选框处于选中状态 - 设置
checked = ""（空字符串）使复选框处于未选中状态
- 复选框的
按钮事件处理：
- 使用
onclick为按钮绑定点击事件 - 通过
this.value获取按钮当前的文本值，判断当前状态 - 根据当前状态切换按钮文本（"全选"和"全不选"之间切换）
- 使用
循环遍历：
- 使用
for...of循环遍历所有复选框元素 - 在循环中统一设置所有复选框的选中状态
- 使用
功能扩展思路
- 可以添加"反选"功能，即点击后选中所有未选中的选项，取消所有已选中的选项
- 可以实时判断是否所有选项都已选中，如果是则自动将按钮文本改为"全不选"
- 可以添加选项数量统计功能，显示当前选中了多少项
- 可以通过CSS美化界面，让复选框和按钮的样式更美观
这个案例展示了如何通过JavaScript操作表单元素，特别是复选框的状态控制，是表单交互中常见的功能实现方式。