這是一篇嘔心瀝血的小程式教程

從昨天下午到現在才弄明白的實現方法 如果你有更好的方法 請分享給我吧～

需求是這樣的 哪個被選中就改變哪個的樣式  我放的明明是動態圖 但是它不動我也沒辦法

正常來說這個用jq來做是非常簡單的

但是小程式中沒辦法操作Dom 所以這個過程就邊的複雜了起來

開始實現步驟！

這是html的程式碼

checkbox-group這個標籤是用來來繫結複選框的

bindchange是小程式自帶的方法 用來監聽複選框的選中狀態 裡面繫結的方法在js中

這裡的重點是wx:for繫結的陣列和{{item.checked?’is_checked’:’ ‘}}這段三目運算子  下面會用到

這個三目運算子的結構是：{{ 陣列中的checked是否為true ？“true新增名稱為is_checked的class” : “ 否則返回空”}}

這是Js中的程式碼

首先要在data中定義一個空的陣列用 我這裡定義的名稱為isChecked

這裡就是剛剛繫結的方法啦 我都有標註釋

this.setData是小程式更新資料的方法

說明一下 我這裡的資料是後臺傳過來的 本來是沒有checked這個欄位的

if中判斷後要做的事就是將這個checked欄位新增到isChecked陣列中

為了不影響原來的資料才定義了新的陣列

最後給is_checked這個class新增樣式就可以了