如何用div标签实现无隐藏单选按钮的表单提交功能？

Hey，这个需求我刚好有类似的实现经验——不用隐藏真实单选按钮，纯靠div来模拟选择项，还要实现提交产品数据+跳转指定页面的功能对吧？我给你整理了一套完整的方案，一步步来：

1. 用div标签作为选项容器，通过data-*属性存储产品的关键数据（比如ID、名称）
2. 借助CSS类来标记选中状态，给用户清晰的视觉反馈
3. 用JavaScript记录用户选中的产品数据，点击结账按钮时，通过动态创建表单提交或Fetch API异步提交的方式，把数据发送到服务器，完成后跳转到指定页面

HTML结构 #

<!-- 产品选项组 -->
<div class="product-options">
  <div class="product-option" data-product-id="1" data-product-name="基础套餐">选项1</div>
  <div class="product-option" data-product-id="2" data-product-name="进阶套餐">选项2</div>
  <div class="product-option" data-product-id="3" data-product-name="豪华套餐">选项3</div>
</div>

<!-- 结账操作区 -->
<button id="checkout-btn" class="checkout-btn">立即结账</button>

CSS样式 #

.product-options {
  margin: 20px 0;
}

.product-option {
  padding: 12px 24px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

/* 选中状态样式 */
.product-option.selected {
  border-color: #165DFF;
  background-color: #E8F3FF;
  color: #165DFF;
}

.checkout-btn {
  padding: 12px 36px;
  background-color: #00B42A;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.checkout-btn:hover {
  background-color: #009A25;
}

JavaScript逻辑 #

// 初始化变量：存储选中的产品数据
let selectedProduct = null;

// 给所有产品选项绑定点击事件
document.querySelectorAll('.product-option').forEach(option => {
  option.addEventListener('click', () => {
    // 移除所有选项的选中状态
    document.querySelectorAll('.product-option').forEach(opt => opt.classList.remove('selected'));
    // 标记当前选项为选中状态
    option.classList.add('selected');
    // 读取并存储当前选中的产品数据
    selectedProduct = {
      productId: option.dataset.productId,
      productName: option.dataset.productName
    };
  });
});

// 结账按钮点击事件处理
document.getElementById('checkout-btn').addEventListener('click', () => {
  // 校验：用户未选择产品时给出提示
  if (!selectedProduct) {
    alert('请先选择一个套餐再结账哦！');
    return;
  }

  // 方式1：动态创建表单提交（适合需要同步跳转的场景，兼容所有浏览器）
  const submitForm = document.createElement('form');
  submitForm.method = 'POST';
  submitForm.action = '/your-server-checkout-api'; // 替换成你的服务器结账接口地址
  submitForm.target = '_self'; // 在当前页面跳转

  // 添加产品ID的隐藏字段
  const productIdInput = document.createElement('input');
  productIdInput.type = 'hidden';
  productIdInput.name = 'product_id';
  productIdInput.value = selectedProduct.productId;

  // 添加产品名称的隐藏字段（可选，根据服务器需求调整）
  const productNameInput = document.createElement('input');
  productNameInput.type = 'hidden';
  productNameInput.name = 'product_name';
  productNameInput.value = selectedProduct.productName;

  // 将字段添加到表单并提交
  submitForm.appendChild(productIdInput);
  submitForm.appendChild(productNameInput);
  document.body.appendChild(submitForm);
  submitForm.submit();

  // ------------------------------
  // 方式2：Fetch API异步提交（适合需要处理服务器响应的场景）
  // fetch('/your-server-checkout-api', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //     // 如果需要身份验证，可以在这里添加Token
  //     // 'Authorization': 'Bearer ' + yourToken
  //   },
  //   body: JSON.stringify(selectedProduct)
  // })
  // .then(response => {
  //   if (response.ok) {
  //     // 提交成功后跳转到指定页面
  //     window.location.href = '/your-success-page';
  //   } else {
  //     throw new Error('提交失败');
  //   }
  // })
  // .catch(error => {
  //   console.error('结账出错:', error);
  //   alert('结账失败，请稍后重试！');
  // });
});

• 数据存储：用data-*属性存储产品数据，既符合HTML标准，又能方便地通过JavaScript读取，避免把数据硬编码在文本或JS变量里
• 选中状态：通过CSS类控制视觉样式，比直接修改元素样式更易维护，也方便后续扩展
• 提交方式选择：
  • 动态表单提交：兼容性最好，适合传统后端架构（比如PHP、Java Spring），提交后直接同步跳转
  • Fetch API提交：适合前后端分离的项目，可以在提交后根据服务器响应做更多处理（比如显示成功提示再跳转）
• 用户体验：增加了未选择产品的校验，避免无效提交，提升用户体验

内容的提问来源于stack exchange，提问作者serversideman