微信小程式多選框選中後改變樣式--自定義圖片
阿新 • • 發佈:2019-01-06
原理:主要利用了js 的indexOf() 方法可返回某個指定的字串值在字串中首次出現的位置。
注意:image裡面的圖片自己加
wxml
wxss<text>多選框</text> <checkbox-group class="radio-group" bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}" wx:key="unique"> <checkbox value="{{item.value}}" hidden='true'/>{{item.name}} <block wx:if="{{item.checked}}"> <image class='select' src='../images/se1.png'></image> </block> <block wx:else> <image class='select' src='../images/se2.png'></image> </block> </label> </checkbox-group>
.radio-group{
font-size: 35rpx;
display: flex;
flex-direction: column;
}
.select{
width: 100rpx;
height: 50rpx;
}
.checkbox{
height: 100rpx;
}
jsdata: { items: [ { name: '中國', value: '0', checked:false }, { name: '法國', value: '1', checked:false }, { name: '美國', value: '2', checked: false }, { name: '德國', value: '3', checked: false}, { name: '英國', value: '4', checked: false }, { name: '日本', value: '5', checked: false}, ] }, checkboxChange: function (e) { console.log(e) var items = this.data.items; var checkArr = e.detail.value; for (var i = 0; i < items.length; i++) { if (checkArr.indexOf(i + "") != -1) { items[i].checked = true; } else { items[i].checked = false; } } this.setData({ items: items }) }