跳至內容
Astera Technology

兩組單選互相取消?先查 name

文字大小和用色是兩個選擇;用不同 name 分組,避免改用色時取消字級。

兩組原生單選;改用色不會取消文字大小。

下載完整個案資料及參考答案 ↓

先看這個例子

兩個 fieldset 把畫面分組,各有 legend。這份單一文件內,單選 name 分別是 size 和 ink,才令它們各自成組。起初揀「細字」和「深色」,再改揀「大字」和「綠色」。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
起始狀態查看已選項small、dark 已選
選大字啟用 largelarge、dark 已選
再選綠色啟用 greenlarge、green 已選;small、dark 未選
下載可編輯 CSV ↓

瀏覽器怎樣處理

單選分組要看 name、所在樹及所屬 form 等因素。本例全部在同一棵樹,沒有 form 所屬,因此以不同 name 分開。只用不同 fieldset,不能抵消相同 name 的分組。本例只改原生選取狀態,不會替整頁套字級或主題色。

fieldsets 分開了,相同 name 仍會互相取消

反例雖然分兩個 fieldset,兩個控制項卻同用 name="choice"。在本例的同樹、無 form 所屬情況下,選綠色會取消大字。

反例原始碼,請另開例子核對
<fieldset><legend>文字大小</legend><label><input id="large" type="radio" name="choice" checked>大字</label></fieldset><fieldset><legend>用色</legend><label><input id="green" type="radio" name="choice">綠色</label></fieldset>

選綠色後,只有 green 已選;兩個 fieldset 未能保留兩項獨立選擇。

試着修正

新增「中字」作第三個字級,應用哪個 name?揀它會否影響綠色?

查看參考答案

用 name="size」,讓中字取代現時所選字級。綠色仍用 name="ink」,選取狀態不受影響。

  • 每次選擇後,核對四個控制項的已選狀態。
  • 標籤和圖例要寫清楚真正選的是甚麼。

原始例子檔案

相關資源