JavaScript-使用div标记提交数据

前几天我看到一个网站，它有一个非常酷的结账系统，这让我意识到仅仅使用常规表单是无法做到的

基本上，他们使用div标签作为单选按钮，但他们隐藏单选按钮并没有任何诡计

HTML示例：

那么我希望发生什么呢

用户按下一个选项，例如选项2 用户按下签出按钮 然后用户被重定向到任何页面 并将他们选择的产品的数据发送到服务器

我到处都在寻找解决办法，表格是没有用的，我不明白你是怎么做到的

---

谢谢你看我的问题

这将使您开始以单选按钮样式使用div

当有人单击submitcheckout按钮时，您可以获取活动div的值并在javascript变量中创建一个表单。然后，使用.append将表单注入网页主体，并使用.submit提交刚刚创建/刚刚注入的表单

$'.checkout选项'.单击函数{ $'.checkout选项'.removeClass'active'； $this.addClass'active'； }; $“提交订单”。单击函数{ var prod=$'.checkout-option.active h3'.text； alertprod； var myfrm=\ \ \ '; $'body'.appendmyfrm； $“主题表单”。提交； }; .checkout选项{显示：内联块；宽度：100px；右边距：10px；背景：深色；颜色：白色；填充：10px；字体大小：.9rem；边框：1px实心透明；} .active{背景：白色；颜色：深色；边框：1px实心深色；} 示例产品1 示例产品2 示例产品3

---

Checkout正如@Taplar所提到的，a最适合这个目的

通常，ID对应于数据库中的数据。因此，传递ID就足以引用数据。如果您没有以这种方式构建事物，那么可以包含其他隐藏的输入来传递必要的数据

下面是一个例子：

标签{ 显示：块； 边缘：0.01米； } h3{ 显示：内联块； 保证金：0； } .签出选项输入{ 显示：无； } 输入：选中~h3{ 背景颜色：浅绿色； } 示例产品1 示例产品2 示例产品3 结账

---

既然您想要3，为什么不使用标准表单呢？仅仅因为你想使用div的东西，并不意味着你必须扔掉@Taplar，有一个表单是完全好的，我只是想知道我如何使用JavaScript从div标签发送他们所选产品的数据？使用div标记作为选项，可以使用CSS创建样式非常漂亮的选择框，因为常规输入无法实现这一点，即使可以，也似乎不是一件非常专业的事情。我建议使用标签，而不是div。标签可以有一个内部隐藏的收音机，当他们单击标签内的任何内容时，将选中该选项。那只是一种形式，那不专业吗？收音机可以用css隐藏。这部分不需要Javascript。请参阅和。非常感谢，这正是我想要的！您的代码非常容易阅读，非常感谢您的帮助！

<div class="checkout">


<div class="checkout-option" data="option-1">
<img src="example-product-1">
<h3>Example Product 1</h3>
</div>

<div class="checkout-option" data="option-2">
<img src="example-product-2">
<h3>Example Product 2</h3>
</div>

<div class="checkout-option" data="option-3">
<img src="example-product-3">
<h3>Example Product 3</h3>
</div>

<button id="submit-order">Checkout</button>





</div>