首页前端写一个多选框，并输出多选框的内容

前端写一个多选框，并输出多选框的内容

时间: 2024-04-13 13:30:56 浏览: 25

当然可以！以下是一个例子，展示如何使用 HTML 和 JavaScript 创建一个多选框，并输出所选内容： ```html <!DOCTYPE html> <html> <head> <title>多选框示例</title> </head> <body> <h3>请选择你喜欢的颜色：</h3> <input type="checkbox" id="red" value="红色"> <label for="red">红色</label><br> <input type="checkbox" id="green" value="绿色"> <label for="green">绿色</label><br> <input type="checkbox" id="blue" value="蓝色"> <label for="blue">蓝色</label><br> <button onclick="getSelectedColors()">提交</button> <p id="result"></p> <script> function getSelectedColors() { var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked'); var selectedColors = []; for (var i = 0; i < checkboxes.length; i++) { selectedColors.push(checkboxes[i].value); } document.getElementById('result').innerHTML = '你选择的颜色是：' + selectedColors.join(', '); } </script> </body> </html> ``` 在上面的示例中，我们创建了三个多选框，分别代表红色、绿色和蓝色。当用户选择一个或多个选项后，点击 "提交" 按钮会触发 `getSelectedColors` 函数。该函数使用 `querySelectorAll` 方法获取选中的多选框元素，并将其值存储在 `selectedColors` 数组中。最后，将所选颜色以逗号分隔的形式输出到页面上的 `<p>` 元素中。你可以根据需要修改选项的数量、标签和值。希望这个例子对你有帮助！