如何在Materialize框架中用TypeScript获取开关的1或0状态值

没问题，我帮你搞定这个需求！下面是具体的实现步骤和代码示例：

1. 先写好Materialize开关的HTML结构 #

首先要确保你的开关组件符合Materialize的规范，给开关input设置一个唯一ID方便后续获取：

<div class="switch">
  <label>
    未选中
    <input type="checkbox" id="status-switch">
    <span class="lever"></span>
    选中
  </label>
</div>

2. TypeScript逻辑实现 #

接下来用TypeScript监听开关的状态变化，把布尔值转换成你需要的1或0：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 初始化Materialize开关组件（这一步很重要，Materialize的组件需要手动初始化）
  const switchElement = document.getElementById('status-switch') as HTMLInputElement;
  M.Switch.init(switchElement);

  // 监听开关的change事件
  switchElement.addEventListener('change', (e) => {
    const target = e.target as HTMLInputElement;
    // 根据选中状态转换为1或0
    const switchValue = target.checked ? 1 : 0;
    console.log('当前开关值:', switchValue);
    // 这里可以把switchValue用于你的业务逻辑，比如提交表单、更新状态等
  });

  // 如果你需要主动获取当前值（比如页面加载时）
  const initialValue = switchElement.checked ? 1 : 0;
  console.log('初始开关值:', initialValue);
});

3. 关键细节说明 #

• 一定要先初始化Materialize的Switch组件，否则可能无法正常触发事件或者样式异常
• 用类型断言as HTMLInputElement来告诉TypeScript这个元素是输入框，避免类型报错
• 通过checked属性判断状态，三元表达式直接转换为1或0，逻辑清晰简洁

如果需要复用这个逻辑，可以封装成一个函数：

function getSwitchValue(switchEl: HTMLInputElement): number {
  return switchEl.checked ? 1 : 0;
}

// 使用示例
const mySwitch = document.getElementById('status-switch') as HTMLInputElement;
console.log(getSwitchValue(mySwitch));

内容的提问来源于stack exchange，提问作者A. B