如何为ion-checkbox设置自定义值？

核心实现逻辑 #

ion-checkbox原生默认仅返回布尔类型的选中状态，要绑定自定义值的核心逻辑为：提前定义自定义值，监听组件的选中状态变更事件，手动完成选中状态和自定义值的映射绑定。

分场景实现代码 #

单复选框绑定自定义值（如选中返回1、未选中返回0） #

Angular 实现

<!-- 模板文件 -->
<ion-checkbox [(ngModel)]="isChecked" (ionChange)="handleChange()"></ion-checkbox>

// 逻辑文件
isChecked = false;
// 最终提交用的自定义值
submitVal: number;

handleChange() {
  this.submitVal = this.isChecked ? 1 : 0;
}

React 实现

import { useState } from 'react';
import { IonCheckbox } from '@ionic/react';

const Demo = () => {
  const [isChecked, setIsChecked] = useState(false);
  const submitVal = isChecked ? 1 : 0;

  return (
    <IonCheckbox 
      checked={isChecked}
      onIonChange={(e) => setIsChecked(e.detail.checked)}
    />
  )
}

多复选框绑定不同自定义值 #

Angular 实现

<!-- 模板文件，遍历选项列表渲染复选框 -->
<div *ngFor="let option of optionList">
  <ion-label>{{ option.label }}</ion-label>
  <ion-checkbox 
    [checked]="selectedValList.includes(option.value)"
    (ionChange)="handleMultiChange(option.value, $event)"
  ></ion-checkbox>
</div>

// 逻辑文件
// 自定义选项列表，value为你要绑定的任意类型自定义值
optionList = [
  { label: '管理员', value: 'admin' },
  { label: '普通用户', value: 'user' },
  { label: '访客', value: 'visitor' }
];
// 存储选中的自定义值
selectedValList: string[] = [];

handleMultiChange(customVal: string, event: any) {
  const isChecked = event.detail.checked;
  if (isChecked) {
    this.selectedValList.push(customVal);
  } else {
    this.selectedValList = this.selectedValList.filter(val => val !== customVal);
  }
}

Vue 实现

<template>
  <div v-for="option in optionList" :key="option.value">
    <ion-label>{{ option.label }}</ion-label>
    <ion-checkbox 
      :checked="selectedValList.includes(option.value)"
      @ionChange="handleMultiChange(option.value, $event)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { IonCheckbox, IonLabel } from '@ionic/vue';

const optionList = ref([
  { label: '管理员', value: 'admin' },
  { label: '普通用户', value: 'user' },
  { label: '访客', value: 'visitor' }
]);
const selectedValList = ref([]);

const handleMultiChange = (customVal, event) => {
  const isChecked = event.detail.checked;
  if (isChecked) {
    selectedValList.value.push(customVal);
  } else {
    selectedValList.value = selectedValList.value.filter(val => val !== customVal);
  }
}
</script>

常见不生效原因 #

大部分自定义值不生效的问题，都是因为直接读取ion-checkbox的value属性作为返回值，该属性仅作为组件标识使用，不会随选中状态同步返回自定义值，必须通过状态变更事件手动映射才能生效。

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