Sum values of all checkbox

[philpasquin]

Im have a custom form where I want to display the price of all the checked events using Alpinejs, can't figure out how to do it.

<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>

Brand new to alpinejs and can't figure it out. Thanks

[ryangjchandler]

@philpasquin Here is a CodePen that might help: https://codepen.io/ryangjchandler/pen/oNYJXeb

[philpasquin]

It works except that when I have two checkboxes with the same value, both get checked

<div x-data="data()">
    <input x-model="checked" type="checkbox" name="event1" value="200">
    <input x-model="checked" type="checkbox" name="event2" value="299">
    <input x-model="checked" type="checkbox" name="event2" value="200">
    <p>Checked: <span x-text="JSON.stringify(checked)"></span></p>
    <p>Total: <span x-text="total()"></span></p>
</div>

[ryangjchandler]

Yeah, that's expected because the values are the same. Why do you need 2 checkboxes to have the same value?

[philpasquin]

Choices of multiple events and some events just happens to have the same price.

[ryangjchandler]

In which case, you probably don't want to use the price as the value, you'll want something completely unique.

Edit: I've updated my CodePen with an example, https://codepen.io/ryangjchandler/pen/oNYJXeb.