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

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

时间: 2024-04-13 17:29:07 浏览: 15

好的，这是一个简单的前端多选框的示例代码： ```html <!DOCTYPE html> <html> <head> <title>多选框示例</title> </head> <body> <h1>多选框示例</h1> <form> <input type="checkbox" id="option1" name="option" value="选项1"> <label for="option1">选项1</label><br> <input type="checkbox" id="option2" name="option" value="选项2"> <label for="option2">选项2</label><br> <input type="checkbox" id="option3" name="option" value="选项3"> <label for="option3">选项3</label><br> </form> <button onclick="getSelectedOptions()">获取选中的选项</button> <script> function getSelectedOptions() { var checkboxes = document.getElementsByName("option"); var selectedOptions = []; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { selectedOptions.push(checkboxes[i].value); } } alert("选中的选项有：" + selectedOptions.join(", ")); } </script> </body> </html> ``` 这段代码创建了三个多选框选项，分别是“选项1”，“选项2”和“选项3”。当用户选择了一个或多个选项后，点击按钮“获取选中的选项”将会弹出一个包含选中选项内容的提示框。