HTML复选框怎么使用_HTML checkbox多选框实现与取值方法-html教程-PHP中文网

HTML复选框怎么使用_HTML checkbox多选框实现与取值方法

爱谁谁

发布： 2025-10-21 14:49:01

原创

475人浏览过

复选框用于多选场景，通过name属性分组，value传递值，checked设默认选中，JavaScript用querySelectorAll获取选中值，提交时仅选中的项发送数据。

html复选框怎么使用_html checkbox多选框实现与取值方法

HTML复选框（checkbox）用于让用户从多个选项中选择一个或多个值。它在表单中非常常见，比如兴趣选择、权限设置等场景。正确使用复选框并获取其值，是前端开发的基础技能。

复选框的基本写法

使用 zuojiankuohaophpcninput type="checkbox"> 创建一个复选框。每个复选框应包含 name 和 value 属性，以便提交表单时能正确传递数据。

示例：

<input type="checkbox" name="hobby" value="reading"> 阅读 <br>
<input type="checkbox" name="hobby" value="sports"> 运动 <br>
<input type="checkbox" name="hobby" value="music"> 音乐

注意：多个复选框如果属于同一组，name 属性应相同，这样表单提交时才会以数组形式收集数据。

立即学习“前端免费学习笔记（深入）”；

设置默认选中状态

添加 checked 属性可以让某个复选框默认被选中。

<input type="checkbox" name="hobby" value="reading" checked> 阅读

这在用户编辑已有信息时很有用，比如回显之前的选择。

通过JavaScript获取选中的值

页面中可能有多个同名复选框，需要通过脚本获取所有被选中的值。常用方法如下：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

使用 document.querySelectorAll() 结合属性选择器筛选出选中的复选框：

const checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
const selectedValues = [];
checkboxes.forEach((checkbox) => {
selectedValues.push(checkbox.value);
});
console.log(selectedValues); // 输出如: ["reading", "music"]

这段代码会收集所有 name 为 hobby 且被选中的复选框的 value 值。