HTML中如何让多选框元素默认部分选中

多选框默认勾选需在<input type="checkbox">标签添加checked布尔属性，如<input type="checkbox" checked>；写成selected或default无效，且React/Vue中须用defaultChecked或v-model控制。

多选框（checkbox）怎么默认勾上几个？

直接在对应 <input type="checkbox"> 标签上加 checked 属性就行，浏览器原生支持，不需要 JS。

常见错误是写成 selected 或 default——这两个对 checkbox 完全无效，浏览器会静默忽略，控制台也不报错，只是“看起来没反应”。

1. checked 是布尔属性，写上就生效，不带等号和值：<input type="checkbox" name="tag" value="js" checked>
2. 多个 checkbox 可以各自独立加 checked，互不影响；不像 radio 那样靠 name 分组约束
3. 服务端模板里别直接插变量，比如 PHP 写成 checked="{{ $user->newsletter }}"：哪怕值是字符串 "0" 或 "false"，HTML 也会渲染出 checked 属性，导致实际勾选
4. 正确做法是显式判断：{{ $user->newsletter ? 'checked' : '' }}（PHP），或 EJS 中 <%= user.newsletter ? 'checked' : '' %>

select multiple 怎么默认选中多个 option？

在需要默认选中的 <option> 标签上加 selected 属性，且 <select> 必须带 multiple 属性，否则只当单选处理。

注意：selected 只对 <option> 有效，对 <input type="checkbox"> 无效——这是新手最常混淆的点。

1. selected 也是布尔属性，简写即可：<option value="dev" selected>开发</option>
2. 可以同时给多个 <option> 加 selected，浏览器会全部高亮并提交对应值
3. 如果 <select multiple> 没设 size，默认只显示一行，但多选功能不受影响；用户需按 Ctrl/Command 才能多选
4. 后端接收时，注意字段名是否带 []（如 name="skills[]"），否则 PHP 等可能只收最后一个值

React/Vue 里为什么 default checked 不生效？

框架接管表单后，原生 checked 或 selected 属性只起初始渲染作用，后续状态完全由框架控制。硬写属性反而容易冲突。

1. React 中：用 checked={flag} + onChange 控制 checkbox；defaultChecked 仅用于初始值，且不能响应后续 props 更新
2. Vue 中：用 v-model 绑定数组（多选 checkbox）或字符串（select multiple），checked 属性会被忽略
3. 动态加载选项时（比如异步 fetch），不要先渲染空 <select multiple> 再塞 <option> —— React 会因找不到匹配 value 而清空选中态
4. 安全做法：用条件渲染，比如 {options.length > 0 && <select multiple value={selectedValues}>...</select>}

为什么 JS 设置 select.value 后界面没变化？

最常见的原因是 DOM 还没挂载，或者 value 值不严格匹配 <option value="..."> 的字符串内容（包括空格、大小写、引号包裹等）。

1. 确保脚本执行时 <select> 已存在于页面中，推荐放在 </body> 前，或用 DOMContentLoaded 包裹
2. select.value = "us" 会自动滚动到匹配项并高亮，但如果没找到完全一致的 value，它会设为空字符串，界面无反馈
3. select.selectedIndex = 1 更暴力，直接按索引选，但选项顺序一变就失效
4. 想触发绑定的 change 监听器（比如校验逻辑），得手动派发事件：select.dispatchEvent(new Event('change', { bubbles: true }))

真实场景里最容易被忽略的，是服务端模板里把布尔逻辑直接塞进属性、以及框架中混用原生属性和受控状态——这两类问题不会报错，但行为完全不可预期。