单击按钮时传递多个复选框值

在前端开发中，当用户单击按钮时，可以通过JavaScript代码来获取多个复选框的值并进行传递。以下是一个示例代码：

HTML部分：

<input type="checkbox" id="checkbox1" value="value1">选项1
<input type="checkbox" id="checkbox2" value="value2">选项2
<input type="checkbox" id="checkbox3" value="value3">选项3
<button onclick="getSelectedValues()">提交</button>

JavaScript部分：

function getSelectedValues() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  var values = [];
  for (var i = 0; i < checkboxes.length; i++) {
    values.push(checkboxes[i].value);
  }
  // 在这里可以对获取到的值进行处理或传递给后端
  console.log(values);
}

上述代码中，我们首先给每个复选框添加了一个唯一的id和一个value属性来表示其值。在按钮的onclick事件中，调用了一个名为getSelectedValues的JavaScript函数。

在getSelectedValues函数中，我们使用document.querySelectorAll方法来获取所有被选中的复选框元素。然后通过遍历这些元素，将其值存储在一个数组中。你可以根据实际需求对这些值进行进一步的处理，比如发送给后端进行处理或展示给用户。

腾讯云相关产品推荐：

• 如果你需要在云上部署前端应用，可以使用腾讯云的云服务器（CVM）产品。了解更多信息，请访问：腾讯云云服务器
• 如果你需要在云上存储和管理数据，可以使用腾讯云的云数据库MySQL产品。了解更多信息，请访问：腾讯云云数据库MySQL
• 如果你需要进行音视频处理，可以使用腾讯云的云点播产品。了解更多信息，请访问：腾讯云云点播
• 如果你需要进行人工智能相关的开发，可以使用腾讯云的人工智能开放平台。了解更多信息，请访问：腾讯云人工智能
• 如果你需要进行物联网相关的开发，可以使用腾讯云的物联网开发平台。了解更多信息，请访问：腾讯云物联网
• 如果你需要进行移动应用开发，可以使用腾讯云的移动应用开发平台。了解更多信息，请访问：腾讯云移动应用开发
• 如果你需要进行区块链相关的开发，可以使用腾讯云的区块链服务。了解更多信息，请访问：腾讯云区块链
• 如果你对元宇宙感兴趣，可以了解腾讯云在虚拟现实和增强现实领域的相关产品和服务。了解更多信息，请访问：腾讯云虚拟现实与增强现实 请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行。