【前端教程】JavaScript 实现爱好选择与全选/全不选功能
选择爱好，包含全选和全不选效果
功能说明
实现一个爱好选择功能，包含三个复选框（足球、篮球、乒乓球）和一个按钮，点击按钮可以在"全选"和"全不选"状态之间切换。
实现代码
<!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操作表单元素，特别是复选框的状态控制，是表单交互中常见的功能实现方式。