checkbox例子爱吃的菜全代码
时间: 2024-09-29 07:15:03 浏览: 15
在HTML中,Checkbox是一个用于让用户选择一项或多项选项的输入元素。下面是一个简单的例子,展示如何创建一个显示用户爱吃的菜品的选择列表:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>爱吃的菜</title>
</head>
<body>
<h2>请选择你喜欢的菜品:</h2>
<form>
<input type="checkbox" id="dumplings" name="favoriteFood" value="Dumplings"> 饺子<br>
<input type="checkbox" id="noodles" name="favoriteFood" value="Noodles"> 面条<br>
<input type="checkbox" id="rice" name="favoriteFood" value="Rice"> 米饭<br>
<input type="checkbox" id="pizza" name="favoriteFood" value="Pizza"> 披萨<br>
<input type="submit" value="提交">
</form>
<p>已选菜品:{{ selectedFoods }}</p> <!-- 这部分需要JavaScript来动态获取并显示选中的菜品 -->
</body>
</html>
```
在这个例子中,`<input>`标签中的`type="checkbox"`表示这是一个复选框。每个菜品都有一个唯一的ID (`id`) 和值 (`value`)。
然后你需要使用JavaScript来处理表单提交,并记录用户勾选的菜品。例如,你可以通过事件监听器来获取选中的食物:
```javascript
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交行为
var checkboxes = document.getElementsByName('favoriteFood');
var selectedFoods = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedFoods.push(checkboxes[i].value);
}
}
document.querySelector('p').innerText = '已选菜品:' + selectedFoods.join(', ');
});
```
注意,这只是一个基本示例,实际应用中可能需要服务器端验证和更复杂的交互设计。