
不得不吐糟下checkbox默認樣式真是有點略丑!!!checkbox組件為一個多選框被放到checkbox-group組中,并在checkbox-group(只能包含checkbox)中設置監聽事件。
checkbox-group監聽方法:

checkbox多選屬性:

wxml
<!--checkbox-group就是一個checkbox組 有個監聽事件bindchange,監聽數據選中和取消--><checkbox-group bindchange="listenCheckboxChange"><!--這里用label顯示內容,for循環寫法 wx:for-items 默認item為每一項--> <label style="display: flex;" wx:for-items="{{items}}"> <!--value值和默認選中狀態都是通過數據綁定在js中的--> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label></checkbox-group>js
Page({ /** * 初始化數據 */ data:{ items: [ {name: 'JAVA', value: 'Android', checked: 'true'}, {name: 'Object-C', value: 'IOS'}, {name: 'JSX', value: 'ReactNative'}, {name: 'JS', value: 'wechat'}, {name: 'Python', value: 'Web'} ] }, /** * 監聽checkbox事件 */ listenCheckboxChange:function(e) { console.log('當checkbox-group中的checkbox選中或者取消是我被調用'); //打印對象包含的詳細信息 console.log(e); }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的參數 }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關閉 }})
相關文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數據綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
新聞熱點
疑難解答