如何记录用户已勾选Ionic复选框？

1. 获取复选框的勾选状态 #

Ionic的ion-checkbox组件可以通过checked属性直接获取当前勾选状态（返回布尔值：true为勾选，false为未勾选）。你可以在storeemailCheck函数里读取并处理这个状态：

function storeemailCheck(){
  const isChecked = emailCheckbox.checked;
  // 示例：将状态存储到本地存储，也可根据需求传入后端或做其他处理
  localStorage.setItem('emailCheckStatus', isChecked);
}

2. 监听复选框状态变化 #

要实时捕获用户的勾选操作，需要给ion-checkbox绑定Ionic专属的ionChange事件，触发你的存储函数：

• 方式一：直接在HTML中绑定事件

<ion-list>
  <ion-checkbox id="Email-check" onIonChange="storeemailCheck()">Email</ion-checkbox>
</ion-list>

• 方式二：JS动态绑定（推荐，实现HTML与逻辑分离）

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  emailCheckbox.addEventListener('ionChange', storeemailCheck);
});

3. 页面加载时恢复历史状态 #

如果需要在页面重新打开时恢复之前的勾选状态，可在初始化时读取本地存储的值并设置给复选框：

document.addEventListener('DOMContentLoaded', function() {
  // 读取本地存储的状态，默认设为未勾选
  const savedStatus = localStorage.getItem('emailCheckStatus') === 'true';
  emailCheckbox.checked = savedStatus;
});

完整示例代码 #

<ion-list>
  <ion-checkbox id="Email-check">Email</ion-checkbox>
</ion-list>

<script>
const emailCheckbox = document.querySelector('#Email-check');

function storeemailCheck(){
  const isChecked = emailCheckbox.checked;
  localStorage.setItem('emailCheckStatus', isChecked);
  // 可选：控制台打印状态，方便验证
  console.log('Email复选框状态：', isChecked);
}

// 页面初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  const savedStatus = localStorage.getItem('emailCheckStatus') === 'true';
  emailCheckbox.checked = savedStatus;
  emailCheckbox.addEventListener('ionChange', storeemailCheck);
});
</script>

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