在原生JavaScript中使用Computed Properties更新变量

1. 定义HTML结构 #

确保每个复选框的name属性严格对应你要控制的JavaScript变量名：

<input type="checkbox" name="requireInteraction"> requireInteraction
<input type="checkbox" name="silent"> silent
<input type="checkbox" name="foo"> foo
<input type="checkbox" name="bar"> bar

2. JavaScript逻辑实现 #

核心思路是把要控制的变量统一放到一个对象中（单个独立变量无法直接用计算属性名赋值），通过复选框的name作为动态属性名来修改对应值：

// 初始化配置对象，所有属性默认设为false
const config = {
  requireInteraction: false,
  silent: false,
  foo: false,
  bar: false
};

// 获取所有目标复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 绑定change事件处理函数
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 利用计算属性名，将对象中对应name的属性设为复选框的勾选状态
    config[this.name] = this.checked;
    // 可选：打印查看当前配置状态
    console.log('当前配置:', config);
  });

  // 可选：页面加载时同步复选框状态与初始变量值
  checkbox.checked = config[checkbox.name];
});

关键说明 #

• 用对象存储变量的原因：独立变量无法通过动态字符串（比如复选框的name）直接赋值，而对象的obj[动态属性名]语法正好契合计算属性的需求，能通过复选框的name直接定位到要修改的属性。
• 事件绑定中通过this.name获取当前复选框的名称，直接作为对象的属性名，实现了“勾选时自动同步对应变量”的需求。

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