概略說明如何建構回應式、可自動調整且易於使用的複選元件，以便排序及篩選使用者體驗。
在這篇文章中，我想分享構思如何建立複選元件的方法。試試 demo」。
如果您喜歡看影片，請參考這篇文章的 YouTube 版本：
總覽
使用者往往會在商品中看到「許多」項目， 建議您提供降低清單 選項超載。這個 網誌文章介紹篩選使用者介面，藉此減少選擇數量。做法是 顯示項目屬性，使用者可選擇或取消選取，以減少結果 進而減少選項過載情形
互動
目標是為所有使用者及其使用者
各種不同的輸入類型這個過程會採用可靈活調整的回應式設計
一組元件桌面、鍵盤適用的傳統核取方塊側欄
和螢幕閱讀器，以及 <select
multiple>
為使用者提供更便利的體驗
採用內建的觸控複選功能 (不適用於電腦) 可節省工作和建立工作，但我認為相較於在單一元件中建構完整的回應式體驗，我認為提供適當的體驗，而不是建構完整的回應式體驗。
觸控
觸控元件可節省空間，並可提高使用者在
行動裝置。將整個側欄收合到核取方塊，藉此節省空間
<select> 內建重疊觸控體驗。這有助於
系統提供大型觸控疊加層體驗。
鍵盤和遊戲手把
以下示範如何透過鍵盤使用 <select multiple>。
這個內建複選功能無法設定樣式，且只有精簡型 不適合呈現許多選項看看你如何辦到這一點 在這個小方塊中，選擇範圍相當廣泛雖然您可以變更大小 但還是無法做為核取方塊側欄使用。
標記
這兩個元件將包含在相同的 <form> 元素中。針對
無論是勾選或複選題，系統都會觀察並用於
篩選網格，但也可以提交至伺服器。
<form>
</form>
核取方塊元件
核取方塊群組應該包含在
<fieldset>敬上
並將
<legend>。
以這種方式建構 HTML 時，螢幕閱讀器
FormData 將
即可自動瞭解元素之間的關係
<form>
<fieldset>
<legend>New</legend>
… checkboxes …
</fieldset>
</form>
分組後，請為以下項目新增 <label> 和 <input type="checkbox">：
。我選擇將礦場納入 <div>，以便 CSS gap 資源
可以均勻地間距，並在標籤多行時保持對齊。
<form>
<fieldset>
<legend>New</legend>
<div>
<input type="checkbox" id="last 30 days" name="new" value="last 30 days">
<label for="last 30 days">Last 30 Days</label>
</div>
<div>
<input type="checkbox" id="last 6 months" name="new" value="last 6 months">
<label for="last 6 months">Last 6 Months</label>
</div>
</fieldset>
</form>
<select multiple> 元件
<select> 元素僅有一小部分的功能如下：
multiple。
這項屬性與 <select> 元素搭配使用時，使用者可以
請從清單中選擇多個就像從電台清單中變更互動方式一樣
勾選為核取方塊
<form>
<select multiple="true" title="Filter results by category">
…
</select>
</form>
如要在 <select> 中加上標籤及建立群組，請使用
<optgroup>
元素，並提供 label 屬性和值。這個元素和屬性
值與 <fieldset> 和 <legend> 元素類似。
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
…
</optgroup>
</select>
</form>
現在將
<option>敬上
元素。
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
<option value="last 30 days">Last 30 Days</option>
<option value="last 6 months">Last 6 Months</option>
</optgroup>
</select>
</form>
使用計數器追蹤輸入內容，為輔助技術提供資訊
狀態
角色
持續運用這方面的技術，藉此追蹤並維護
篩選器和其他輔助技術。YouTube 影片
即可示範這項功能整合作業開頭為 HTML 和屬性
role="status"。
<div role="status" class="sr-only" id="applied-filters"></div>
這個元素會大聲朗讀變更內容。我們可以更新 透過 CSS 供應商提供的內容 計數器 則可記錄使用者的互動情形如要這麼做，我們必須先建立 的計數器和狀態元素名稱。
aside {
counter-reset: filters;
}
根據預設，計數為 0，太好了，結果沒有任何 :checked
預設用途
接著，為了增加新建的計數器，我們會指定
屬於 :checked 的 <aside> 元素。使用者變更輸入狀態時
filters 計數器會計算。
aside :checked {
counter-increment: filters;
}
CSS 現已採用核取方塊使用者介面和狀態角色的一般計分
元素空白且正在等待值。因為 CSS 供應商
記憶體
counter()敬上
函式可讓您從虛擬
元素內容：
aside #applied-filters::before {
content: counter(filters) " filters ";
}
狀態角色元素的 HTML 現在將會宣告「2 個篩選器」所需畫面 讀取器。這是好的開始，但我們也可以做得更好， 篩選器已更新我們將透過 JavaScript 進行這項操作 而不是計數器所能辦到的
建立巢狀結構的興奮感
使用 CSS 供應商提供的計數器演算法展現絕佳成果 nesting-1，因為我可以將所有 拆分為單一區塊方便集中閱讀及更新。
aside {
counter-reset: filters;
& :checked {
counter-increment: filters;
}
& #applied-filters::before {
content: counter(filters) " filters ";
}
}
版面配置
本節將說明兩個元件之間的版面配置。大部分 版面配置樣式適用於電腦核取方塊元件。
表單
為了提供使用者最佳易讀性和瀏覽便利性，表單的數量上限
寬度為 30 個半形字元，基本上會為每個線條設定光學線寬度
篩選標籤。表單會使用格線版面配置和 gap 屬性，將
欄位集。
form {
display: grid;
gap: 2ch;
max-inline-size: 30ch;
}
<select> 元素
標籤清單和核取方塊都會在行動裝置上佔用過多空間。 因此，版面配置會檢查使用者的主要指標，確認要變更的裝置 使用者的觸控體驗
@media (pointer: coarse) {
select[multiple] {
display: block;
}
}
如果值為 coarse，則表示使用者無法與其互動
並透過主要輸入裝置，提高螢幕精確度。使用
行動裝置，指標值通常為 coarse，做為主要互動
是輕觸的。在電腦裝置上，指標值通常為 fine，因為這是很常見的情況
連接滑鼠或其他高精確度輸入裝置。
欄位集
<fieldset> 包含 <legend> 的預設樣式和版面配置如下：
一般而言，為了使子項元素得到空格，我會使用 gap 屬性，但是不重複值
<legend> 的位置會導致建立均勻的間距集
因此必須瞭解兒童而不是 gap，相鄰的同層級
選取工具
使用的是 margin-block-start。
fieldset {
padding: 2ch;
& > div + div {
margin-block-start: 2ch;
}
}
這項設定會略過<legend>，因為只要指定
<div> 位兒童。
篩選器標籤和核取方塊
做為 <fieldset> 的直接子項，且不超過表單的寬度上限
30ch，如果標籤文字過長，可能會自動換行。換行固然很好
文字和核取方塊之間沒有衝突。Flexbox 正是理想的選擇。
fieldset > div {
display: flex;
gap: 2ch;
align-items: baseline;
}
動畫格線
版面配置動畫是由 Isotope 進行。A 罩杯 成效卓越且強大的外掛程式，支援互動排序及篩選。
JavaScript
除了協助安排流暢的互動式動畫、互動式網格、JavaScript 內容 它會用來修飾兩個粗略的邊緣
將使用者輸入內容標準化
這項設計採用一種形式，包含兩種提供輸入內容的方式 請勿 序列化 完全一樣。不過在某些 JavaScript 中 將資料正規化。
我選擇將 <select> 元素資料結構與已分組的核取方塊對齊
成本中心的架構如要這麼做，
input敬上
事件監聽器會新增至 <select> 元素，
selectedOptions
物件之間會對應各個項目。
document.querySelector('select').addEventListener('input', event => {
// make selectedOptions iterable then reduce a new array object
let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
// parent optgroup label and option value are added to the reduce aggregator
data.push([opt.parentElement.label.toLowerCase(), opt.value])
return data
}, [])
})
您可以放心提交表單了；如果是示範影片，請指示 Isotope 篩選依據
完成狀態角色元素
元素只會根據核取方塊統計及宣告篩選器數量
但我覺得同樣地
結果，並確保系統也計算 <select> 元素選項。
counter() 已反映 <select> 個元素選項
在資料正規化部分中，我們已根據輸入建立事件監聽器。在 此函式結尾處代表所選篩選器的數量和結果數量 知道這些篩選器代表的意義這些值可傳送至狀態角色元素 就像這樣
let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length
role="status" 元素中反映的結果
:checked 提供內建方法，能將所選數量的數個篩選器傳遞至
狀態角色元素，但無法查看篩選後的結果數量。
JavaScript 可以監控與核取方塊的互動，且在篩選後
格線，加入 textContent，就像 <select> 元素一樣。
document
.querySelector('aside form')
.addEventListener('input', e => {
// isotope demo code
let filterResults = IsotopeGrid.getFilteredItemElements().length
document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})
整體來說，這項工作完成了公告「2 個篩選條件，產生 25 筆結果」。
現在，我們卓越的輔助技術將能 但會與內容互動
結論
現在你知道我怎麼了，這樣會如何 🙂?
讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。 建立示範、將 Twitter 推文連結，我們就會為您新增 前往下方的社群重混專區！
社群重混作品
這裡還沒有任何資訊！