©2020-2024 ioDraw All rights reserved,
Privacy Policy
众所周知微信小程序多选框默认为小方框，有时候看起来有些呆板，以下代码提供一些样式修改方法，具体样式可根据个人需求修改
修改前后效果图对比
修改前
修改后
代码
wxml
<view class="container"> <view class="page-body"> <view class="page-section
page-section-gap"> <view class="page-section-title">默认样式</view> <label
class="checkbox"> <checkbox value="cb" checked="true"/>选中 </label> <label
class="checkbox"> <checkbox value="cb" />未选中 </label> </view> <view
class="page-section"> <view class="page-section-title">推荐展示样式</view> <view
class="weui-cells weui-cells_after-title"> <checkbox-group
bindchange="checkboxChange"> <label class="weui-cell weui-check__label"
wx:for="{{items}}" wx:key="{{item.value}}"> <view class="weui-cell__hd">
<checkbox value="{{item.value}}" checked="{{item.checked}}"/> </view> <view
class="weui-cell__bd">{{item.name}}</view> </label> </checkbox-group> </view>
</view> </view> </view>
wxss
page{ text-align: center; } .weui-cell { display: flex; //盒子垂直、水平居中
justify-content: center; align-items: center; padding: 20rpx 0; }
//-----------------------------------------主要代码---------------------------- //
复选框样式 checkbox .wx-checkbox-input { width: 50rpx; height: 50rpx; border-radius:
50%; } // 复选框选中样式 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-color: #18d6ff; background-color: #18d6ff; } // 复选框选中之后对号的样式 checkbox
.wx-checkbox-input.wx-checkbox-input-checked::before { color:#fff; }
js
Page({ onShareAppMessage() { return { title: 'checkbox', path:
'page/component/pages/checkbox/checkbox' } }, data: { items: [ {value: 'USA',
name: '美国'}, {value: 'CHN', name: '中国', checked: 'true'}, {value: 'BRA', name:
'巴西'}, {value: 'JPN', name: '日本'}, {value: 'ENG', name: '英国'}, {value: 'FRA',
name: '法国'} ] }, checkboxChange(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value) const items =
this.data.items const values = e.detail.value for (let i = 0, lenI =
items.length; i < lenI; ++i) { items[i].checked = false for (let j = 0, lenJ =
values.length; j < lenJ; ++j) { if (items[i].value === values[j]) {
items[i].checked = true break } } } this.setData({ items }) } })