如何使用 alpinejs 对选中复选框的所有值求和

【问题标题】：How to sum all values of checked checkboxes using alpinejs如何使用 alpinejs 对选中复选框的所有值求和
【发布时间】：2021-03-11 05:06:08
【问题描述】：

您有一个自定义表单，我想使用 alpinejs 对所有选中复选框的值求和。

类似这样的：

<div x-data="price : 0">
  <input @click="price = 200"  type="checkbox" name="event1" value="200">
  <input @click="price = 299" type="checkbox" name="event2" value="299">
  <p x-text="total"></p>
</div>

【问题讨论】：

标签： checkbox sum alpine.js

【解决方案1】：

您可以使用@change 事件并询问是否检查输入以求和或从总数中减去。

<div x-data="{price : 0}">
  <input @change="price += ($event.target.checked) ? +$event.target.value : -$event.target.value"  type="checkbox" name="event1" value="200">
  <input @change="price += ($event.target.checked) ? +$event.target.value : -$event.target.value"  type="checkbox" name="event2" value="299">
  <p x-text="price"></p> 
</div>

编辑：

在此示例中添加了一支笔： https://codepen.io/victor-cortes/pen/LYbMVqb

【讨论】：