index.wxml
<view class="term"> <view> <checkbox-group bindchange="checkboxChange"> <view class="weui-cell__hd"> <checkbox value="1" color="#fe0000" class="radio1" /> </view> <view class="weui-cell__bd">我已閱讀並同意<text class="fr1" bindtap="showModal1" >隱私政策</text></view> </checkbox-group> </view> </view>
index.wxss
.term{ margin-top: 60rpx; line-height: 60rpx; font-size: 28rpx; font-weight: 700; color: #999999; position: relative; } .term .fr1{ color: #fe0000; } .radio1{ transform:scale(0.8); } /*checkbox 選項框大小 */ checkbox .wx-checkbox-input { width: 36rpx; height: 36rpx; border-radius: 50%; } /*checkbox選中后樣式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #fe0000; border: none; } /*checkbox選中后圖標樣式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 22rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .weui-cell__hd{ width: 53rpx; display: inline-block; float: left; }
index.js
data: { is_agree: false, acceptRule: false, }, checkboxChange(e) { console.log('checkbox發生change事件,攜帶value值為:', e.detail.value) if(e.detail.value == 1){ this.setData({ is_agree: false, acceptRule: true }); }else{ this.setData({ is_agree: true, acceptRule: false }); } },