纯JS简化表单默认值设置：统一处理select与单选/复选框

嘿，这个场景我太熟悉了！每次处理混合类型的表单控件时，分情况设置selected和checked确实有点啰嗦。其实我们可以利用表单元素本身的特性，用更简洁的纯JS逻辑把这两种情况合并，不用再依赖外部的类型标记啦。

核心思路 #

不管是<option>还是单选/复选框<input>，我们可以直接通过元素的标签名来判断该设置哪个属性——毕竟下拉选项的标签是OPTION，而单选/复选框都是INPUT标签。这样不仅简化了代码，还能摆脱对param.type的依赖，逻辑更健壮。

简化后的代码 #

// 先获取目标元素
const targetElement = this.form.querySelector(`[value="${optionKey}"]`);

// 避免找不到元素时报错，先做存在性判断
if (targetElement) {
  // 根据标签名动态选择要设置的属性
  targetElement[targetElement.tagName === 'OPTION' ? 'selected' : 'checked'] = true;
}

为什么这能生效？ #

• 对于<option>元素，设置selected属性就能标记为默认选中项；
• 对于<input type="radio">或<input type="checkbox">，设置checked属性就能完成默认选中；
• 用方括号语法动态访问属性，完美把两种分支逻辑合并成一行，代码更简洁。

如果担心模板字符串的兼容性（比如老项目还在用ES5），也可以把选择器改回字符串拼接的形式：'[value="' + optionKey + '"]'，效果是完全一致的。

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