创建个人爱好复选框,(音乐、登山、游泳、阅读、打球、跑步),点击全选则全部选中,全部选则全部取消。用js
时间: 2023-06-16 13:03:03 浏览: 83
可以使用以下方法来实现:
HTML代码:
```
<label><input type="checkbox" name="hobbies" value="music">音乐</label>
<label><input type="checkbox" name="hobbies" value="climbing">登山</label>
<label><input type="checkbox" name="hobbies" value="swimming">游泳</label>
<label><input type="checkbox" name="hobbies" value="reading">阅读</label>
<label><input type="checkbox" name="hobbies" value="playing">打球</label>
<label><input type="checkbox" name="hobbies" value="running">跑步</label>
<button id="select-all">全选</button>
<button id="deselect-all">全部取消</button>
```
JavaScript代码:
```javascript
// 获取全选和全部取消按钮
var selectAllBtn = document.getElementById("select-all");
var deselectAllBtn = document.getElementById("deselect-all");
// 获取所有爱好复选框
var checkboxes = document.getElementsByName("hobbies");
// 给全选按钮添加点击事件
selectAllBtn.onclick = function() {
// 遍历所有复选框,设置它们为选中状态
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
};
// 给全部取消按钮添加点击事件
deselectAllBtn.onclick = function() {
// 遍历所有复选框,设置它们为未选中状态
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
};
```
当点击全选按钮时,遍历所有爱好复选框,将它们设置为选中状态;当点击全部取消按钮时,遍历所有爱好复选框,将它们设置为未选中状态。