复选框通过创建，获取选中值需用javascript检查checked属性；2. name属性定义表单提交时的字段名，value属性定义选中时提交的值，未设置value时默认为"on"；3. 获取同名复选框的选中值可用document.getelementsbyname()遍历并判断checked状态，或用queryselectorall配合:checked伪类；4. 复选框用于多项选择或独立开关，单选框用于互斥选项，选择依据是用户是否只能选一项，二者根据交互需求正确选用以确保数据逻辑清晰完整。
HTML复选框，也就是我们常说的checkbox，其实就是用
这个简单的标签来创建的。至于怎么获取它的选中值，这通常需要借助JavaScript的力量，通过遍历页面上所有相关的复选框，然后检查它们的checked属性就能知道哪些被选中了。这比你想象的要直接得多。
解决方案
写一个复选框，基础形态是这样的：
这里面，
type="checkbox"明确了它是个复选框。
id是给这个元素一个独一无二的标识，方便JavaScript或者
label标签关联。
name属性非常关键，它定义了当表单提交时，这个复选框的数据会以什么名字发送出去。而
value属性，则是当这个复选框被选中时，它会携带的实际数据。如果你想让它默认就是选中的，可以加上
checked属性，比如。
立即学习“前端免费学习笔记（深入）”；
获取选中值，在前端最常见的就是用JavaScript了。想象一下，你有一堆复选框，想知道用户到底选了哪些：
// 假设你有一些复选框，比如：
//
//
//
const selectedInterests = [];
// 获取所有name为'interests'的复选框
const checkboxes = document.querySelectorAll('input[name="interests"]');
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
selectedInterests.push(checkbox.value);
}
});
console.log(selectedInterests); // 比如：["coding"]
// 这样你就能得到一个数组，里面包含了所有被选中的复选框的值。你也可以监听复选框的状态变化。比如，当用户点击一个复选框时，立刻做出反应：
const myCheckbox = document.getElementById('myCheckbox');
if (myCheckbox) { // 确保元素存在，这是个好习惯
myCheckbox.addEventListener('change', (event) => {
if (event.target.checked) {
console.log(event.target.value + ' 被选中了！');
} else {
console.log(event.target.value + ' 被取消选中了。');
}
});
}这两种方式，一个用于“批量”获取当前状态，一个用于“实时”响应变化，都非常实用。
复选框的name
和value
属性究竟有何深意？
这两个属性，说实话，是复选框能够“有用”的关键。
name属性就像是给复选框起的一个“组名”或者“类别名”。当你的表单被提交到服务器时，服务器端程序就是通过这个
name来识别并接收数据的。比如，你有一组关于“爱好”的复选框，它们都叫
name="hobby"，那么服务器就能知道，哦，这是用户选择的爱好列表。如果它们没有
name，或者
name不同，服务器就很难把它们归到一起处理了。
而
value属性，则是当这个复选框被选中时，真正会被发送出去的数据。打个比方，你有三个复选框，都叫
name="fruit"，但它们的
value分别是
apple、
banana、
orange。如果用户选中了苹果和香蕉，那么提交到服务器的数据可能就是
fruit=apple&fruit=banana（或者根据服务器框架不同，直接解析成一个数组
['apple', 'banana']）。如果一个复选框没有明确设置
value属性，那么当它被选中并提交时，它的默认值通常是字符串
"on"。所以，为了数据的清晰和准确，我个人是强烈建议始终为复选框设置一个有意义的
value。这能避免很多后端解析时的困惑。
面对一堆同名复选框，我该怎么优雅地获取它们的选中值？
这确实是个很常见的场景，比如“请选择您的兴趣爱好”或者“订阅哪些邮件通知”。当多个复选框共享同一个
name属性时，它们就被视为一个逻辑上的“组”。在HTML表单提交时，所有被选中的同名复选框的
value都会被发送。
在JavaScript中获取这些值，思路也很直接：找到所有拥有特定
name属性的复选框，然后逐一检查它们是否被选中。
function getSelectedValuesByName(name) {
const selected = [];
// document.getElementsByName 返回的是一个 NodeList，可以对其进行forEach遍历
const checkboxes = document.getElementsByName(name);
checkboxes.forEach(cb => {
if (cb.checked) {
selected.push(cb.value);
}
});
return selected;
}
// 假设你的HTML中有：
//
//
//
//
const chosenColors = getSelectedValuesByName('colors');
console.log('选中的颜色是:', chosenColors); // 可能会输出 ["green", "yellow"]这里我用了
document.getElementsByName()，它会返回一个
NodeList，你可以直接对其进行
forEach遍历。当然，用
document.querySelectorAll('input[name="yourName"]:checked')也是一个非常简洁的办法，它直接就返回了所有被选中的元素，省去了判断checked属性的步骤，但我个人觉得分开写，逻辑更清晰，也方便调试。选择哪种方式，更多是看个人习惯和项目需求。
复选框与单选框：两者之间有何玄机，又该如何抉择？
复选框（checkbox）和单选框（radio button），它们在外形上确实有点像，都是小方块或小圆圈，但它们的核心功能差异巨大，直接决定了你在不同场景下应该选用哪个。
核心区别：
- 复选框（Checkbox）：允许用户从一组选项中选择零个、一个或多个。它表示的是一种“是/否”或“包含/不包含”的状态。比如，你可以同时选择“阅读”和“旅行”作为你的兴趣爱好。
-
单选框（Radio Button）：允许用户从一组互斥的选项中只能选择一个。这些单选框必须拥有相同的
name
属性，这样浏览器才知道它们属于同一组，并且只能选中其中一个。比如，选择“性别”时，你只能是“男”或“女”，不能同时选。
何时选用： 我通常是这样判断的：
-
用复选框：当你需要用户进行多项选择时，或者某个选项是独立的开关时。
- 示例：
- “请选择您想订阅的邮件类型：[ ] 新闻 [ ] 促销 [ ] 产品更新” (多选)
- “记住我的登录信息 [ ]” (独立开关)
- “我已阅读并同意用户协议 [ ]” (独立开关，通常是必选)
- 示例：
- 用单选框：当你需要用户在几个互斥的选项中做出唯一选择时。
理解它们的设计哲学，能帮助你构建更符合用户直觉的界面。选择错误，轻则让用户困惑，重则导致数据逻辑错误。在我看来，这是前端交互设计中最基础但也最容易被忽视的细节之一。
