產(chǎn)品篇

在我們的后臺中，需要設(shè)置廣告精準(zhǔn)投放的區(qū)域，也就是要在全國31個省、自治區(qū)、直轄市中選擇。那么，出現(xiàn)下面這幅景象也就理所應(yīng)當(dāng)了：

這樣做有幾個問題：

    選項很多，沒有規(guī)律，找起來很累
    如果是一個已經(jīng)選擇了部分選項的廣告，修改時仍然需要用肉眼尋找，無法一眼看出來投放到哪些省份
    選完一個，再選下一個，還要從頭找，甚至?xí)灰呀?jīng)選過的影響

于是我想，首先應(yīng)該把所有選項分為“已選中”和“未選中”兩批，解決第2個問題，減輕第3個問題；其次復(fù)選框本身的價值不大，可以被替換為其它樣式；唯一可能引入的問題，就是點(diǎn)選時，用戶的預(yù)期是看到復(fù)選框里出現(xiàn)一個小對勾，表示選中，如果我把它移開放到“已選中”組里，用戶可能會迷惑，需要一些時間學(xué)習(xí)。

于是我跟某產(chǎn)品經(jīng)理朋友聊了聊這個想法，他表示確實可能造成用戶迷惑，不過如果能加入動畫效果，那么基本沒問題。嗯，開始動手。
技術(shù)實現(xiàn)篇

近日flexbox規(guī)范定案，各瀏覽器相繼支持display:flex;，同時傳來一條好消息，新實現(xiàn)比老實現(xiàn)display:box;快很多。這次我打算用flexbox來解決問題，因為里面有一個很重要的屬性：order（之前叫box-ordinal-group），它可以改變布局中元素的排列順序，配合CSS3新增的選擇器，應(yīng)該可以滿足需要。
第一步 分拆選中/未選中

（關(guān)于flexbox的知識，可以通過Google了解，雖然搜到的多是上一個版本，不過和最終版差別不大，只是叫法不同。本文不再過多講解，我就當(dāng)大家都會了）

<input type="checkbox">本身的樣式不能修改，所以我們必須借助的幫助；實現(xiàn)選中/未選中區(qū)分，那自然就要用到偽類:checked；選擇器一定是從外到內(nèi)、從前到后的，沒法選擇父級元素，所以不能用<label>去包<input>，那么最終布局就只能是：

很簡單哈，不解釋了。CSS3新增了“下一節(jié)點(diǎn)”選擇器 +，用來選擇某節(jié)點(diǎn)的下一個節(jié)點(diǎn)，結(jié)合:checked偽類就可以將選中的<input>和它臨近的<label>通過改變order屬性移到前面去：

不過這樣只是把選中的內(nèi)容提前，視覺上沒有真正的分割。所以我決定再加入一根分割線，上面是選中的，下面是未選的。這個時候我們需要用到 ~ 這個選擇器，選擇某節(jié)點(diǎn)后面的節(jié)點(diǎn)：

http://jsfiddle.net/meathill/fPN3p/5/embedded/result/

這樣基礎(chǔ)功能實現(xiàn)了。不過視覺上，排版仍然不整齊，選中的選項和未選中的選項區(qū)分不算太明顯，所以下一步我準(zhǔn)備美化下checkbox。
第二步，美化CHECKBOX

做法與前面類似，也要用到CSS3新增的選擇器。前面為了實現(xiàn)<label>提前，沒有用它包裹<input>，所以在選項很多很長導(dǎo)致?lián)Q行的時候，可能出現(xiàn)復(fù)選框和標(biāo)簽脫離的尷尬狀況。好在復(fù)選框的價值可以用別的樣式取代，所以先把小方框隱藏起來，轉(zhuǎn)而將<label>作為操作目標(biāo)，再來點(diǎn)邊框底色圓角（參考自Bootstrap 3），就可以了：

這樣看起來還有上升空間，如果加上幾個圖標(biāo)響應(yīng)用戶操作，那么學(xué)習(xí)成本會更低，對操作后的預(yù)期也會更準(zhǔn)確。于是引用CDN上的font-awesome，使用:before偽類加上小圖標(biāo)，就得到了最終效果

。

http://jsfiddle.net/meathill/fPN3p/4/embedded/result/

我無意中發(fā)現(xiàn)，這樣批量添加刪除時，鼠標(biāo)可以常點(diǎn)不動，應(yīng)該也是個意外的收獲吧。
第三步，加入動畫教育用戶（失?。?/strong>