首页JS中使用dom操作实现请选择你的爱好：全选乒乓球篮球羽毛球足球全选取消反选提交按钮代码

JS中使用dom操作实现请选择你的爱好：全选乒乓球篮球羽毛球足球全选取消反选提交按钮代码

时间: 2024-12-10 20:34:16 浏览: 12

在JavaScript中，DOM（Document Object Model）操作通常用于动态地修改HTML元素。如果你想要实现"选择你的爱好"这样的功能，可以使用`document.getElementById()`、`querySelector()`等方法来获取特定的HTML元素，然后通过`.addEventListener()`添加事件监听器来处理用户的交互。例如，假设有一个简单的HTML结构，包含了几个选项作为 `<input>` 元素： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择爱好</title> </head> <body> <input type="checkbox" id="pingpong" value="乒乓球"> <label for="pingpong">乒乓球</label><br> <input type="checkbox" id="basketball" value="篮球"> <label for="basketball">篮球</label><br>  <button id="submit">提交</button> <script src="your-script.js"></script> </body> </html> ``` 在对应的JavaScript文件（如 `your-script.js`）里，你可以这样做： ```javascript document.getElementById('submit').addEventListener('click', function() { var hobbies = []; var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked'); checkboxes.forEach(function(checkbox) { hobbies.push(checkbox.value); }); console.log('你的爱好有:', hobbies); // 输出用户选择的爱好 // 这里可以根据需要进一步处理，比如发送到服务器或更新页面显示 }); ``` 在这个例子中，当点击“提交”按钮时，会获取所有选中的复选框值，并显示在控制台。

阅读全文