生成一个有多选框的html页面的代码
时间: 2024-04-11 20:28:28 浏览: 9
可以使用以下代码生成一个包含多选框的 HTML 页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>多选框示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>多选框示例</h1>
<form>
<input type="checkbox" name="option1" value="Option 1"> Option 1<br>
<input type="checkbox" name="option2" value="Option 2"> Option 2<br>
<input type="checkbox" name="option3" value="Option 3"> Option 3<br>
<input type="checkbox" name="option4" value="Option 4"> Option 4<br>
</form>
<button id="submitBtn">提交</button>
<script>
$(document).ready(function(){
$("#submitBtn").click(function(){
var selectedValues = [];
$("input[type='checkbox']:checked").each(function(){
selectedValues.push($(this).val());
});
console.log(selectedValues);
});
});
</script>
</body>
</html>
```
这个页面包含了一个表单,其中有四个多选框选项。当点击 "提交" 按钮时,使用 jQuery 选择器 `input[type='checkbox']:checked` 来获取所有被选中的多选框,并将其值添加到一个数组中。
你可以将上述代码保存为一个 HTML 文件,然后在浏览器中打开该文件,就可以看到包含多选框的页面,并在点击提交按钮后将选中的值打印到控制台。