JavaScript中DOM复选框属性赋值问题：两种写法为何效果不同？

核心差异 #

• 第一种写法中，var checkbox = document.getElementById(ID).checked; 是把DOM元素checked属性的布尔值副本存在变量里。后续checkbox = true只是修改了这个变量里的副本，和原DOM元素的checked属性完全没关系，所以复选框状态不会变。
• 第二种写法里，var checkbox = document.getElementById(ID); 存的是DOM元素对象的引用地址。修改checkbox.checked = true时，是通过这个引用直接操作原DOM元素的属性，自然能改变复选框状态。

你避开的JavaScript规则 #

这是基础类型与引用类型的赋值差异：

• 布尔、数字这类基础类型，赋值时是值的拷贝，变量和原数据各自独立，改变量不会影响原数据。
• 对象、DOM元素这类引用类型，赋值时拷贝的是内存地址，变量和原对象指向同一块内存，修改变量的属性会同步到原对象上。

能否直接保存checked属性的引用？ #

不行。因为checked是基础类型的属性，你访问它时拿到的始终是值的副本，没法直接保存这个属性的"引用"。如果想简化操作，可以用封装函数或者getter/setter模拟：

封装函数写法 #

// 获取复选框状态
function getChecked(id) {
  return document.getElementById(id).checked;
}
// 设置复选框状态
function setChecked(id, val) {
  document.getElementById(id).checked = val;
}

// 使用示例
setChecked(ID, true);

getter/setter模拟引用写法 #

const checkboxProxy = {
  get checked() {
    return document.getElementById(ID).checked;
  },
  set checked(val) {
    document.getElementById(ID).checked = val;
  }
};

// 直接修改proxy的checked就会操作DOM
checkboxProxy.checked = true;

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