选中复选框时如何提交表单

在前端开发中，我们经常需要在表单中使用复选框进行多选。但是，当用户选中多个复选框后，我们如何将这些选项提交给后端服务器呢？本文将围绕如何在选中复选框时提交表单进行介绍。

前置知识

在开始介绍如何提交表单之前，需要了解一些前置知识：

1. 表单的基本结构

表单是网页中常用的元素之一，它的基本结构包括 form 标签和多个表单控件，如输入框、下拉框、单选框、复选框等。在 HTML 代码中，一个基本的表单结构如下：

<form action="/submit" method="post">
  <input type="text" name="username" placeholder="请输入用户名"><br>
  <input type="password" name="password" placeholder="请输入密码"><br>
  <button type="submit">提交</button>
</form>

其中，action 属性表示表单提交的 URL，method 属性表示表单提交的方式。表单中的控件通过 name 属性来标识。

2. 复选框的使用

在 HTML 中，我们可以通过 input 标签的 type 属性来指定控件类型，其中 type="checkbox" 表示复选框。复选框定义时需要指定 value 属性作为选中时提交的值。一个基本的复选框结构如下：

<input type="checkbox" name="hobby" value="swimming">游泳

在多个选项时，可以通过相同的 name 属性来分组，多个复选框如果选中时需要提交，则需要设置 checked 属性：

<input type="checkbox" name="hobby" value="swimming" checked>游泳
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="traveling" checked>旅行

如何提交表单？

在了解了表单和复选框的基本知识之后，我们可以开始介绍如何在选中复选框时提交表单。

1. 使用 JavaScript 自定义提交事件

当用户选中一个或多个复选框后，我们需要在提交表单时将选项值一并提交到后端服务器。可以在提交时使用 JavaScript 编写自定义的提交事件，将选中的复选框值收集起来发送至后端。一个常见的实现方式如下：

const form = document.querySelector('form'); // 获取表单元素
form.addEventListener('submit', function(e) { // 添加表单提交事件监听器
  e.preventDefault(); // 阻止表单自动提交
  const checkedValues = []; // 定义集合存储选中的复选框值
  const checkboxes = document.querySelectorAll('input[type="checkbox"][name="hobby"]'); // 获取所有名为"hobby"的复选框元素
  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      checkedValues.push(checkbox.value); // 将选中的值存入集合
    }
  });
  const formData = new FormData(form); // 初始化表单数据
  formData.append('checkedValues', checkedValues.join(',')); // 添加选中的复选框值到表单数据中
  fetch('/submit', {
    method: 'POST',
    body: formData
  }).then((res) => {
    // 后续处理
  });
});

该代码片段使用 addEventListener 添加表单提交事件监听器，阻止默认行为，通过查询 DOM 元素的方式获取选中的复选框元素，存储选中的值到集合中，使用 FormData 收集表单数据，并在表单数据中添加选中的复选框值，最后使用 fetch 发送数据到后端服务器。

2. 使用 HTML 的 form 属性

HTML 表单元素提供了一个 form 属性，用于指向表单的 ID 或 Name。可以将复选框放置在与表单相同的元素中，在复选框选中时，通过 form.submit() 方法提交表单。一个实现方式如下：

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username" placeholder="请输入用户名"><br>
  <input type="password" name="password" placeholder="请输入密码"><br>
  <input type="checkbox" name="hobby" value="swimming">游泳
  <input type="checkbox" name="hobby" value="reading">阅读
  <input type="checkbox" name="hobby" value="traveling">旅行
  <button type="button" onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
  const form = document.querySelector('#myForm');
  const checkboxes = document.querySelectorAll('input[type="checkbox"][name="hobby"]');
  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      form.appendChild(
        document.createElement('input')
      ).setAttribute('name', 'checkedValues').setAttribute('value', checkbox.value);
    }
  });
  form.submit();
}
</script>

该代码片段使用 submitForm() 方法将选中的复选框值添加到表单数据中，然后通过 form.submit() 方法提交表单至后端服务器。

总结

选中复选框时提交表单是前端开发中的一项常见需求，本文介绍了两种常见的实现方式，分别是使用 JavaScript 自定义提交事件和使用 HTML 的 form 属性，通过本文的介绍，相信读者可以掌握如何在选中复选框时提交表单的技巧。