HTML复选框的使用与选中值获取方法
HTML复选框是网页表单中常见的交互组件，用于让用户在多个选项中选择零个或多个内容。它通常配合<input>标签实现，核心属性为type="checkbox"。本文将详细介绍复选框的基础写法，以及不同场景下获取选中值的方法。
一、HTML复选框基础写法
复选框的基础结构由<input>标签和可选的<label>标签组成，<label>标签可以提升可点击区域，同时增强可访问性。以下是基础示例：
<!-- 单个复选框示例 --> <form id="hobbyForm"> <p>请选择你的爱好：</p> <!-- 每个选项设置相同的name属性，用于分组 --> <input type="checkbox" id="hobby1" name="hobby" value="reading"> <label for="hobby1">阅读</label> <input type="checkbox" id="hobby2" name="hobby" value="sports"> <label for="hobby2">运动</label> <input type="checkbox" id="hobby3" name="hobby" value="music"> <label for="hobby3">音乐</label> <input type="checkbox" id="hobby4" name="hobby" value="coding"> <label for="hobby4">编程</label> <button type="button" onclick="getCheckedValues()">获取选中值</button> </form>
上述代码中，每个复选框的name属性都设置为hobby，表示这些选项属于同一组；value属性是提交或获取时的实际值；id与<label>的for属性对应，点击文字即可选中对应复选框。
二、原生JavaScript获取复选框选中值
使用原生JavaScript获取复选框选中值，核心思路是获取所有同组的复选框元素，遍历判断checked属性是否为true，再收集对应的value值。
2.1 常规遍历获取
以下是配合上述HTML结构的取值函数实现：
function getCheckedValues() {
// 获取所有name为hobby的复选框元素
const checkboxList = document.querySelectorAll('input[name="hobby"]:checked');
// 收集选中值
const checkedValues = [];
checkboxList.forEach(item => {
checkedValues.push(item.value);
});
// 输出结果，如果没有选中则返回空数组
console.log('选中的爱好值：', checkedValues);
alert('选中的爱好值：' + (checkedValues.length > 0 ? checkedValues.join(',') : '无'));
}这里使用document.querySelectorAll配合选择器input[name="hobby"]:checked，可以直接筛选出所有选中状态的复选框，无需额外判断checked属性，代码更简洁。
2.2 监听复选框状态变化实时获取
如果需要实时监听复选框的选中状态变化，可以绑定change事件：
// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
const checkboxList = document.querySelectorAll('input[name="hobby"]');
const resultEle = document.createElement('p');
resultEle.id = 'checkResult';
document.getElementById('hobbyForm').appendChild(resultEle);
checkboxList.forEach(item => {
item.addEventListener('change', function() {
const checkedValues = Array.from(checkboxList)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value);
document.getElementById('checkResult').textContent = '当前选中：' + (checkedValues.length > 0 ? checkedValues.join(',') : '无');
});
});
});三、jQuery获取复选框选中值
如果项目中引入了jQuery库，获取选中值的代码会更简洁，核心使用:checked选择器和each遍历方法：
// 需要先引入jQuery库，示例引入地址：https://www.ipipp.com/jquery.min.js
function getCheckedValuesJq() {
const checkedValues = [];
// 筛选所有选中的复选框
$('input[name="hobby"]:checked').each(function() {
checkedValues.push($(this).val());
});
console.log('jQuery获取的选中值：', checkedValues);
alert('选中的爱好值：' + (checkedValues.length > 0 ? checkedValues.join(',') : '无'));
}四、表单提交时获取复选框选中值
在表单提交场景中，复选框的选中值会随表单数据一起提交，如果使用FormData对象处理表单数据，可以很方便地获取所有选中值：
document.getElementById('hobbyForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交行为
const formData = new FormData(this);
// getAll方法可以获取同名参数的所有值，返回数组
const hobbyValues = formData.getAll('hobby');
console.log('表单提交的选中值：', hobbyValues);
// 模拟提交到接口 https://www.ipipp.com/api/submitHobby
// fetch('https://www.ipipp.com/api/submitHobby', {
// method: 'POST',
// body: formData
// }).then(res => res.json()).then(data => console.log(data));
});注意这里使用formData.getAll('hobby')而不是get，因为get只会返回第一个选中的值，而getAll会返回所有同名字段的值数组，符合复选框多选的场景。
五、注意事项
复选框的
name属性用于分组，同组复选框建议设置相同的name，方便批量获取和表单提交。如果没有设置
value属性，选中时提交的值为on，建议显式设置明确的value值。获取选中值时，优先使用
:checked选择器筛选，比遍历后判断checked属性效率更高。如果页面中有动态新增的复选框，事件绑定需要使用事件委托，避免无法监听到新增元素的操作。
总结：HTML复选框通过<input type="checkbox">实现，获取选中值的核心是先筛选出所有选中状态的复选框元素，再收集其
value属性。不同技术栈的实现思路一致，只是语法略有差异，可根据项目实际情况选择合适的方法。