微信小程序--checkbox-group样式修改,去掉勾选框 && 微信小程序radio的样式修改

微信小程序–checkbox-group样式修改,去掉勾选框

<checkbox-group bindchange="checkChange">
    <view class="serviceSel">
      <label wx:for="{{medHis}}" wx:key="{{medHis}}" class="checkbox {{item.checked?'is_checked':''}}">
        <checkbox value="{{item.value}}" checked="{{item.checked}}" hidden="false" />{{item.name}}
      </label>
    </view>
  </checkbox-group>
data:{
 medHis:[
      {name:'无',value:0,checked:true},
      {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},
      {name:'脂肪肝',value:6,checked:false},
      {name:'高尿酸',value:7,checked:false},
      {name:'痛风',value:8,checked:false},
      {name:'月经紊乱',value:9,checked:false},
      {name:'多囊卵巢综合征PCOS',value:10,checked:false},
      {name:'呼吸暂停综合征',value:11,checked:false},
    ],
},
//选择病史
  checkChange: function (e) {
    console.log('radio发生change事件,携带value值为:', e)
    var that = this
    that.setData({
      value: e.detail.value
    })
    var medHis = this.data.medHis;
    var checkArr = e.detail.value;
    for (var i = 0; i < medHis.length; i++) {
      if (checkArr.indexOf(i + "") != -1) {
        medHis[i].checked = true;
      } else {
        medHis[i].checked = false;
      }
    }
    this.setData({
      medHis: medHis
    })  
  },
.serviceSel {
  width: 100%;
  margin-top: 40rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 2%;
  box-sizing: border-box;
}

.checkbox {
  width: 46%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 72rpx;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(166, 166, 170, 100);
  margin-bottom: 40rpx;
}
.checkbox:nth-child(2n){
  margin-left: 40rpx;
}

.is_checked {
  background-color: rgba(148, 110, 250, 100);
  color: rgba(255, 255, 255, 100);
  border: 1px solid rgba(255, 255, 255, 100);
}

在这里插入图片描述

微信小程序 checkbox样式修改二

checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #6995FD;
  background-color: #6995FD;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color:#fff;
}

在这里插入图片描述

微信小程序radio的样式修改

radio .wx-radio-input.wx-radio-input-checked {
  border-color: #cc0000;
  background: #cc0000;
}
radio .wx-radio-input {
  height: 35rpx;
  width: 35rpx;
  margin-top: -4rpx;
  border-radius: 50%;
  border: 2rpx solid #999;
  background: transparent;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  height: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  line-height: 35rpx;
  text-align: center;
  font-size: 28rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: #1584F7;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

前端大白19

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值