html多选按钮代码怎么写
在HTML中，通常使用<input>元素的type="checkbox"来创建多选按钮。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Checkboxes</title>
</head>
<body>
<h2>请选择您的爱好：</h2>
<form action="#">
<input type="checkbox" id="hobby1" name="hobby1" value="篮球">
<label for="hobby1">篮球</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="足球">
<label for="hobby2">足球</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="网球">
<label for="hobby3">网球</label><br>
<input type="checkbox" id="hobby4" name="hobby4" value="游泳">
<label for="hobby4">游泳</label><br>
<input type="checkbox" id="hobby5" name="hobby5" value="登山">
<label for="hobby5">登山</label><br>
<input type="submit" value="提交">
</form>
</body>
</html>
在这个示例中，<input type="checkbox">用于创建复选框，用户可以通过点击来选择或取消选择。id属性用于将标签与其关联的<label>元素相关联，name属性定义了表单数据的名称，value属性指定了复选框的值。
用户可以选择一个或多个选项，然后点击提交按钮，表单数据将被提交到服务器端进行处理。
当用户点击提交按钮时，可以使用JavaScript来处理选中的复选框，并执行相应的操作。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Checkboxes</title>
<script>
function showSelectedHobbies() {
var selectedHobbies = [];
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
selectedHobbies.push(checkbox.value);
}
});
if (selectedHobbies.length > 0) {
alert("您选择的爱好是: " + selectedHobbies.join(", "));
} else {
alert("请至少选择一个爱好！");
}
}
</script>
</head>
<body>
<h2>请选择您的爱好：</h2>
<form action="#" onsubmit="return false;">
<input type="checkbox" id="hobby1" name="hobby1" value="篮球">
<label for="hobby1">篮球</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="足球">
<label for="hobby2">足球</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="网球">
<label for="hobby3">网球</label><br>
<input type="checkbox" id="hobby4" name="hobby4" value="游泳">
<label for="hobby4">游泳</label><br>
<input type="checkbox" id="hobby5" name="hobby5" value="登山">
<label for="hobby5">登山</label><br>
<input type="button" value="提交" onclick="showSelectedHobbies()">
</form>
</body>
</html>
在这个示例中，JavaScript函数showSelectedHobbies()被调用来获取所有选中的复选框，并将它们的值存储在selectedHobbies数组中。然后，它会将这些值连接起来并显示为一个警告框，告诉用户他们选择了哪些爱好。
这个例子中，onsubmit="return false;"被用于阻止表单默认的提交行为，而是在点击按钮时触发JavaScript函数。
