按钮组+修改radio样式

	<div class="pay">
	  <radio-group bindchange="radiochange">
	    <div>
	      <image src="./image/apliay.png" class="noWechat"></image>
	        <span>支付宝支付</span>  
	        <input id="alipay" value="1" type="radio" name="choose" onclick="choosePayType(this)"></input>
	        <label for="alipay"></label>
	      </div>
	      <div>
	      <image src="./image/WeChat.png" class="wechat"></image>
	        <span>微信支付</span>
	        <input id="wechatPay" value="0" type="radio" name="choose" onclick="choosePayType(this)"></input>
	        <label for="wechatPay"></label>
	      </div>
	      <div>
	      <image src="./image/balance.png" class="noWechat" name="choose"></image>
	        <span id="balancePay"></span>
	        <input id="balance" value="3" type="radio" name="choose" onclick="choosePayType(this)"></input>
			<label for="balance"></label>	      
	      </div>
	      <div>
	      <image src="./image/integral.png" class="noWechat"></image>
	        <span id="integralPay"></span>
	        <input id="integral" value="2" type="radio" name="choose" onclick="choosePayType(this)"></input>
	        <label for="integral"></label>	 
	      </div>
	    </radio-group>
	  </div>

@CHARSET "UTF-8";
/* pay/payment/payment.wxss */
html, body {
   background: #F6F6F6;
   margin: 0;
   padding: 0;
}
.clernfix{
	
}
div {
margin:30px 0 30px 0; 
background-color: #ffffff;
/*padding: 20px;*/

}
 div span{
  display: block;
  color: #a09292;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 5px;
  }
  .pay{
  padding:16px
  }
  .pay .wechat{
    width:30px;
    height: 30px;
    margin: 5px;
    vertical-align: middle;
  }
    .pay .noWechat{
    width:30px;
    height: 30px;
    margin: 5px;
    vertical-align: middle;
  }
  .pay span,input,discount{
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
  }
  input{
    float: right;
    margin-top:12px
  }
  #confirm{
      display: inline-block;
      background-color: #ff3333 !important;
      color: white;
      width: 100px;
      height: 50px;
      font-size: 16px;
      line-height: 30px;
      border-radius: 30px;
  }

  .bottom{
    position: fixed;
    bottom:0;
    padding: 0;
	width: 100%;
	padding-left: 10px;
  }
  .bottom span{
  	display: inline-block
  }
  .bottom #confirm{
    position: fixed;
    right: 0;
      margin: 6px;
    /* float: right */
    /* right: 300rpx; */
  }
  
  .discount{
  	position:relative;
  	padding:10px
  }
  .discount span{
   
    display: inline!important;
  }
  .discount .noDiscount{
     margin-right: 10px;
	position: absolute;
	right: 16px;
	top: 6px;
    }
  .discount .return{
	display: inline-block;
	width: 15px;
	height: 15px;
	position: absolute;
	right: 6px;
	top: 18px;
}
  .bottom p{
    color: red;
    display: inline-block;
      line-height: 30px;
  }
  .pay div{
    margin: 0
  }
.noAllowClick{
  pointer-events: none;
  color: #fff;
  background: red;
  opacity: 0.7
}
.message{
    width: 100%;
    height:120px;
	padding: 10px;
	padding-bottom: 0
}
 div {
      position: relative;
      line-height: 30px;
    }
    
       input[type='radio'] {
      width: 20px;
      height: 20px;
      opacity: 0;
    }
 
    label {
		position: absolute;
		top: 8px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid #999;
		right: 5px;
    }
 
    /*设置选中的input的样式*/
    /* + 是兄弟选择器,获取选中后的label元素*/
    input:checked+label {
		background-color: #ff3647;
		border: 1px solid #fb2c2c;
    }
 
    input:checked+label::after {
      position: absolute;
      content: '';
      width: 5px;
      height: 10px;
      top: 3px;
      left: 6px;
      border: 2px solid #fff;
      border-top: none;
      border-left: none;
      transform: rotate(45deg);
    }

css写的太乱了，需要调整

input:checked ~ label   ：相邻同胞选择器，选择被选中的input标签后 所有的label标签［input  和 label标签有共同的父元素］；

input:checked ＋ label   ：相邻同胞选择器，选择被选中的input标签后 第一个label标签［input  和 label标签有共同的父元素］；