微信小程序勾选协议

wxml:

<view class="checkbox flex-y-center" bindtap="click">

          <label class='{{checked?"is_checked":""}}'>

                <image src="/images/img/ok.png" mode="widthFix"/>

         </label>

         <view class="check_text">依照学术诚信原则，我保证本人独立完成</view>

</view>

wxss:

.checkbox label{

  width: 30rpx;

  height: 30rpx;

  border: 1rpx solid #bebebe;

  border-radius: 5rpx;

  margin-right: 10rpx;

  position: relative;

}

.checkbox image{

  display: none;

}

.is_checked{

  background-color: #d43205;

  border: 1rpx solid #d43205!important;

}

.is_checked image{

  display: block;

  width: 18rpx;

  height: 14rpx;

  position: absolute;

  left: 6rpx;

  top: 50%;

  transform: translateY(-50%);

}

.checkbox{

  margin: 30rpx 50rpx;

}

.checkbox .check_text{

  width: calc(100% - 40rpx);

  font-size: 22rpx;

  color: #000;

}

 

js:

Page({

  data: {

    checked:false

  },

  /*勾选协议 */

  click:function(e){

    this.setData({

      checked: !this.data.checked

    })

  }

});