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

<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.js"></script>

<div x-data="{ selectedValues: [] }">
  <input type="checkbox" value="1" x-model="selectedValues"> 1
  <input type="checkbox" value="2" x-model="selectedValues"> 2
  <input type="checkbox" value="3" x-model="selectedValues"> 3
</div>

<div x-data="{ selectedValues: [] }">
  <input type="checkbox" value="1" x-model="selectedValues"> 1
  <input type="checkbox" value="2" x-model="selectedValues"> 2
  <input type="checkbox" value="3" x-model="selectedValues"> 3
  <button x-on:click="sumSelectedValues()">求和</button>
</div>

<div x-data="{ selectedValues: [], sum: 0 }">
  <input type="checkbox" value="1" x-model="selectedValues"> 1
  <input type="checkbox" value="2" x-model="selectedValues"> 2
  <input type="checkbox" value="3" x-model="selectedValues"> 3
  <button x-on:click="sumSelectedValues()">求和</button>
  <p>选中的值之和为: <span x-text="sum"></span></p>
</div>

<script>
  function sumSelectedValues() {
    let selectedValues = this.selectedValues;
    let sum = 0;
    for (let i = 0; i < selectedValues.length; i++) {
      sum += parseInt(selectedValues[i]);
    }
    this.sum = sum;
  }
</script>