HTML复选框使用与多选实现方法

HTML复选框（checkbox）是实现多选交互的基础元素，通过简单的`<input type="checkbox">`即可创建，配合`name`分组、`value`传值、`checked`设默认状态及``提升可访问性，就能构建语义清晰、用户友好的选择界面；进一步借助JavaScript可实时监听、批量获取选中项，无缝对接表单提交与后端数组接收；而通过CSS隐藏原生样式、利用`:checked`伪类定制外观，还能在保持功能完备的同时实现高度视觉化和交互增强——掌握这些核心技巧，你就能灵活应对从问卷调查到权限配置等各种多选场景。

HTML复选框（checkbox）用于让用户从多个选项中选择一个或多个。它通过 input 标签定义，type 属性设置为 checkbox 来实现。

基本语法：如何定义复选框

每个复选框使用 <input type="checkbox"> 创建，并建议配合 label 标签提升可访问性。

示例代码：

<input type="checkbox" id="option1" name="fruit" value="apple">
<label for="option1">苹果</label>

&lt;input type=&quot;checkbox&quot; id=&quot;option2&quot; name=&quot;fruit&quot; value=&quot;banana&quot;&gt;
<label for="option2">香蕉</label>

&lt;input type=&quot;checkbox&quot; id=&quot;option3&quot; name=&quot;fruit&quot; value=&quot;orange&quot; checked&gt;
<label for="option3">橙子（默认选中）</label>

获取选中的复选框值（JavaScript 实现多选处理）

表单提交时，只有被选中的复选框才会提交数据。使用 JavaScript 可以动态获取所有选中的项。

常见方法：

// 方法一：通过 querySelectorAll 获取所有选中的 checkbox
const checkboxes = document.querySelectorAll('input[name="fruit"]:checked');
const selectedValues = [];

checkboxes.forEach((box) => {
  selectedValues.push(box.value);
});

console.log(selectedValues); // 如：["apple", "orange"]

方法二：绑定事件实时监听选择变化

document.querySelectorAll('input[name="fruit"]').forEach(box => {
  box.addEventListener('change', function() {
    if (this.checked) {
      console.log(this.value + ' 被选中');
    } else {
      console.log(this.value + ' 被取消');
    }
  });
});

表单中提交复选框数据

在 form 中，多个同名复选框可以提交数组式数据。后端通常以数组方式接收（如 PHP 的 $_POST['fruit'][] 或 Node.js 配合解析器）。

<form action="/submit" method="post">
  &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;reading&quot;&gt; 阅读 <br>
  &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;music&quot;&gt; 听音乐 <br>
  &lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot; value=&quot;sports&quot;&gt; 运动 <br>
  <button type="submit">提交</button>
</form>

用户提交后，服务器只收到被勾选的 hobby 值。

样式美化与增强交互

原生复选框样式受限，可通过隐藏 input 并用 label 模拟来自定义外观。

思路：

• 将 input 设置为透明或隐藏
• 使用 CSS 给 label 设计自定义图标或背景
• 利用 :checked 伪类切换样式

示例CSS：

.custom-checkbox {
  display: none;
}
.custom-label {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  user-select: none;
}
.custom-checkbox:checked + .custom-label {
  background-color: #007bff;
  color: white;
}

对应HTML：

<input type="checkbox" class="custom-checkbox" id="cb1">
<label class="custom-label" for="cb1">自定义样式复选框</label>

好了，本文到此结束，带大家了解了《HTML复选框使用与多选实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！