如何在Alpine.js中为未选中的复选框提交0值？

核心思路 #

默认情况下，Alpine.js的x-model绑定数组只会收集选中复选框的value值，未选中项不会被包含。要实现每个复选框对应键、选中状态对应1/0的对象格式，需要用对象替代数组跟踪每个复选框的状态，确保所有复选框的键都在对象中初始化，未选中时值为0，选中时设为1。

静态复选框实现示例 #

直接初始化包含所有复选框键的对象，绑定每个复选框到对象的对应属性：

<div x-data="{
  data: {
    locations: {
      check_1: 0,
      check_2: 0
    }
  },
  submitForm() {
    // this.data.locations即为目标格式的对象
    console.log(this.data.locations);
    // 此处添加提交到后端的逻辑（如fetch/post）
  }
}">
  <input id="check_1" type="checkbox" x-model="data.locations.check_1" @change="data.locations.check_1 = $event.target.checked ? 1 : 0">
  <label for="check_1">选项1</label>

  <input id="check_2" type="checkbox" x-model="data.locations.check_2" @change="data.locations.check_2 = $event.target.checked ? 1 : 0">
  <label for="check_2">选项2</label>

  <button @click="submitForm">提交</button>
</div>

简化版（利用布尔值转换） #

如果觉得手动切换1/0麻烦，可以先绑定布尔值，提交时统一转换为1/0：

<div x-data="{
  data: {
    locations: {
      check_1: false,
      check_2: false
    }
  },
  getSubmitData() {
    // 将布尔值转为1/0格式
    const result = {};
    Object.keys(this.data.locations).forEach(key => {
      result[key] = this.data.locations[key] ? 1 : 0;
    });
    return result;
  },
  submitForm() {
    const formData = this.getSubmitData();
    console.log(formData);
    // 提交逻辑
  }
}">
  <input id="check_1" type="checkbox" x-model="data.locations.check_1">
  <label for="check_1">选项1</label>

  <input id="check_2" type="checkbox" x-model="data.locations.check_2">
  <label for="check_2">选项2</label>

  <button @click="submitForm">提交</button>
</div>

动态生成复选框的场景 #

如果复选框是从后端动态获取的列表，可在init钩子中初始化对象：

<div x-data="{
  data: {
    locations: {}
  },
  init() {
    // 模拟从后端获取的复选框键列表
    const checkboxKeys = ['check_1', 'check_2', 'check_3'];
    checkboxKeys.forEach(key => {
      this.data.locations[key] = 0;
    });
  },
  submitForm() {
    console.log(this.data.locations);
  }
}">
  <template x-for="(key, idx) in Object.keys(data.locations)" :key="idx">
    <div>
      <input :id="key" type="checkbox" x-model="data.locations[key]" @change="data.locations[key] = $event.target.checked ? 1 : 0">
      <label :for="key" x-text="key"></label>
    </div>
  </template>

  <button @click="submitForm">提交</button>
</div>

以上方案均可实现需求：提交时得到以复选框值为键、选中状态为1/0的对象。

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