赣州家居网站询价可能同时收集一种合作方式和多类关注资料。这两个问题的选择规则不同,不能只因为视觉上都像小圆点或方块,就共用同一实现。先确认哪些答案互斥、哪些能并存,再核对实际提交与业务接收。
一份自拟需求,两种选择关系
<form id="demo-choice">
<fieldset><legend>本次合作方式</legend>
<label><input type="radio" name="route" value="wholesale">批发合作</label>
<label><input type="radio" name="route" value="retail">单件咨询</label>
</fieldset>
<fieldset><legend>希望了解的资料,可多选</legend>
<label><input type="checkbox" name="interest" value="finish">表面说明</label>
<label><input type="checkbox" name="interest" value="package">包装说明</label>
</fieldset>
</form>MDN说明,同组radio通过相同name形成互斥关系;checkbox可分别勾选,未勾选的项在原生提交中不会发送该名称和值。多选同名字段需要按真实接口正确接收,不能只取第一个值就声称已支持多选。
对照页面规则与服务器规则
| 事项 | 单选 | 多选 |
|---|---|---|
| 业务含义 | 允许同组中的一个答案 | 允许多个答案并存 |
| 页面提示 | 说明需要选择什么 | 明确可多选及范围 |
| 原生提交 | 核对实际被选值 | 核对重复字段和未勾选状态 |
| 服务器处理 | 校验允许值及必要性 | 校验集合,不静默丢值 |
先用四种受控状态复测
- 没有选择时,确认必要性与提示按规则处理。
- 选择一个答案后,核对显示与提交值。
- 尝试选择两个多选项,确认接收没有只保留其一。
- 切换单选项后,确认同组只保留当前项。
未勾选就一定代表否定吗?
不一定,可能是未作答或不适用,应按字段定义区分,不能自动写成明确否定。
加必填能解决所有组合问题吗?
不能,它不能代替允许值、集合关系和后端业务规则。
交接表应包含字段名、允许答案与空状态含义,前端、接口和销售才能理解同一份资料。一次能点击,不足以证明完整支持单选或多选。