复选框通过创建，获取选中值需用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
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
属性，这样浏览器才知道它们属于同一组，并且只能选中其中一个。比如，选择“性别”时，你只能是“男”或“女”，不能同时选。
何时选用：我通常是这样判断的：
用复选框：当你需要用户进行多项选择时，或者某个选项是独立的开关时。示例：“请选择您想订阅的邮件类型：[ ] 新闻 [ ] 促销 [ ] 产品更新” (多选)“记住我的登录信息 [ ]” (独立开关)“我已阅读并同意用户协议 [ ]” (独立开关，通常是必选)用单选框：当你需要用户在几个互斥的选项中做出唯一选择时。示例：“请选择您的学历：( ) 小学 ( ) 中学 ( ) 大学 ( ) 研究生” (单选)“支付方式：( ) 支付宝 ( ) 微信支付 ( ) 银行卡” (单选)
理解它们的设计哲学，能帮助你构建更符合用户直觉的界面。选择错误，轻则让用户困惑，重则导致数据逻辑错误。在我看来，这是前端交互设计中最基础但也最容易被忽视的细节之一。
以上就是HTML复选框怎么写？checkbox如何获取选中值？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572096.html
微信扫一扫 
支付宝扫一扫 
