HTML复选框通过实现多选，name属性相同的一组可多选，value为提交值，添加checked可默认选中，配合label提升可访问性，JavaScript可通过DOM获取选中值，表单提交时仅选中项被发送，后端需以数组形式接收同名checkbox数据。
HTML复选框（checkbox）用于让用户从多个选项中选择一个或多个值。它在表单中非常常见，比如兴趣选择、权限设置等场景。下面详细介绍如何使用 HTML 复选框实现多选功能。
基本语法：创建复选框
使用 来创建一个复选框。每个复选框应包含 name 和 value 属性，以便提交表单时获取对应数据。
阅读
运动
说明：
– name 属性相同的一组 checkbox 被视为一组，用户可多选。
– value 是提交表单时实际发送的值。
– 可通过 label 标签提升可访问性：
设置默认选中状态
添加 checked 属性可以让某个复选框默认被选中。
阅读
也可使用 checked=”checked”，但在现代 HTML 中简写即可。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 获取选中的值
要获取用户选中的所有复选框值，可通过 JavaScript 操作 DOM。
示例代码：
function getSelected() {
const checkboxes = document.querySelectorAll(‘input[name=”hobby”]:checked’);
const values = [];
checkboxes.forEach((box) => {
values.push(box.value);
});
console.log(values); // 输出如: [“reading”, “music”]
}
可以将此函数绑定到按钮点击事件或其他操作上，实时获取用户选择。
表单提交时的处理
当表单提交时，只有被选中的复选框会将数据发送到服务器。但注意：如果多个 checkbox 使用相同的 name，后端需以数组方式接收。
例如在 PHP 中：
// 使用 name=”hobby[]” 让 PHP 自动解析为数组
阅读
运动
PHP 接收：
$hobbies = $_POST[‘hobby’]; // 得到选中的值组成的数组
基本上就这些。HTML 复选框简单但实用，配合 JS 或后端语言能实现灵活的多选逻辑。关键是 name 一致、value 唯一、正确处理选中状态。不复杂但容易忽略细节。
以上就是HTML复选框怎么用_HTML checkbox复选框与多选功能实现的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584968.html
微信扫一扫 
支付宝扫一扫 
