HTML复选框怎么写？checkbox如何获取选中值？-html教程-PHP中文网

HTML复选框怎么写？checkbox如何获取选中值？

星降

发布： 2025-08-15 23:21:01

原创

681人浏览过

复选框通过<input type="checkbox">创建，获取选中值需用javascript检查checked属性；2. name属性定义表单提交时的字段名，value属性定义选中时提交的值，未设置value时默认为"on"；3. 获取同名复选框的选中值可用document.getelementsbyname()遍历并判断checked状态，或用queryselectorall配合:checked伪类；4. 复选框用于多项选择或独立开关，单选框用于互斥选项，选择依据是用户是否只能选一项，二者根据交互需求正确选用以确保数据逻辑清晰完整。

HTML复选框怎么写？checkbox如何获取选中值？

HTML复选框，也就是我们常说的checkbox，其实就是用

<input type="checkbox">

登录后复制

这个简单的标签来创建的。至于怎么获取它的选中值，这通常需要借助JavaScript的力量，通过遍历页面上所有相关的复选框，然后检查它们的

checked

登录后复制

属性就能知道哪些被选中了。这比你想象的要直接得多。

解决方案

写一个复选框，基础形态是这样的：

<input type="checkbox" id="myCheckbox" name="option1" value="value_of_option1">
<label for="myCheckbox">我的选项</label>

登录后复制

这里面，

type="checkbox"

登录后复制

明确了它是个复选框。

id

登录后复制

是给这个元素一个独一无二的标识，方便JavaScript或者

label

登录后复制

标签关联。

name

登录后复制

属性非常关键，它定义了当表单提交时，这个复选框的数据会以什么名字发送出去。而

value

登录后复制

属性，则是当这个复选框被选中时，它会携带的实际数据。如果你想让它默认就是选中的，可以加上

checked

登录后复制

属性，比如

<input type="checkbox" checked>

登录后复制

。

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

获取选中值，在前端最常见的就是用JavaScript了。想象一下，你有一堆复选框，想知道用户到底选了哪些：

// 假设你有一些复选框，比如：
// <input type="checkbox" name="interests" value="reading">
// <input type="checkbox" name="interests" value="travel">
// <input type="checkbox" name="interests" value="coding" checked>

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

登录后复制

不同，服务器就很难把它们归到一起处理了。

PhotoG

PhotoG是全球首个内容营销端对端智能体

121

查看详情

而

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中有：
// <input type="checkbox" name="colors" value="red">
// <input type="checkbox" name="colors" value="green" checked>
// <input type="checkbox" name="colors" value="blue">
// <input type="checkbox" name="colors" value="yellow" checked>

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
```
登录后复制
属性，这样浏览器才知道它们属于同一组，并且只能选中其中一个。比如，选择“性别”时，你只能是“男”或“女”，不能同时选。

何时选用： 我通常是这样判断的：

用复选框：当你需要用户进行多项选择时，或者某个选项是独立的开关时。
- 示例：
  - “请选择您想订阅的邮件类型：[ ] 新闻 [ ] 促销 [ ] 产品更新” (多选)
  - “记住我的登录信息 [ ]” (独立开关)
  - “我已阅读并同意用户协议 [ ]” (独立开关，通常是必选)
用单选框：当你需要用户在几个互斥的选项中做出唯一选择时。
- 示例：
  - “请选择您的学历：( ) 小学 ( ) 中学 ( ) 大学 ( ) 研究生” (单选)
  - “支付方式：( ) 支付宝 ( ) 微信支付 ( ) 银行卡” (单选)