微信小程序 CheckBox选中状态判断
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 }); } },