赣州家居网站询价可能同时收集一种合作方式和多类关注资料。这两个问题的选择规则不同,不能只因为视觉上都像小圆点或方块,就共用同一实现。先确认哪些答案互斥、哪些能并存,再核对实际提交与业务接收。

一份自拟需求,两种选择关系

<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可分别勾选,未勾选的项在原生提交中不会发送该名称和值。多选同名字段需要按真实接口正确接收,不能只取第一个值就声称已支持多选。

对照页面规则与服务器规则

两端必须说同一件事
事项单选多选
业务含义允许同组中的一个答案允许多个答案并存
页面提示说明需要选择什么明确可多选及范围
原生提交核对实际被选值核对重复字段和未勾选状态
服务器处理校验允许值及必要性校验集合,不静默丢值

先用四种受控状态复测

  1. 没有选择时,确认必要性与提示按规则处理。
  2. 选择一个答案后,核对显示与提交值。
  3. 尝试选择两个多选项,确认接收没有只保留其一。
  4. 切换单选项后,确认同组只保留当前项。
未勾选就一定代表否定吗?

不一定,可能是未作答或不适用,应按字段定义区分,不能自动写成明确否定。

加必填能解决所有组合问题吗?

不能,它不能代替允许值、集合关系和后端业务规则。

交接表应包含字段名、允许答案与空状态含义,前端、接口和销售才能理解同一份资料。一次能点击,不足以证明完整支持单选或多选。