场景：自带的单选按钮真的是很不好看，这时候需要radio的自定义美化

 Html 布局
 <ul class="prize-choose">
    <?php foreach ($goods as $key => $data){?>
        <li class="item">
          //选中区域的热区
              <label for="radio<?= $key +1 ?>" style="display: block;">
              <img src="">
              <p><?=!empty($data['name'])?$data['name']:'暂无名称'?></p>
              <div class="detail"><?=$data['detail']?></div>
              <div class="price">
                  <p>
                  <span class="now_price"><?=$data['sale_price']?></span>
                        <del>￥<?=$data['fix_price']?></del>
                  </p>
                  <div class="prize-radio" goods-price="<?=$data['sale_price']?>" goods-id="<?=$data['goods_id']?>">
                     <input type="radio" id="radio<?= $key +1 ?>" name="prizeradio">
                     <label for="radio<?= $key +1 ?>"></label>
                  </div>
             </div>
          </label>
      </li>
  <?php }?>
 </ul>

单选的局部代码 //常规状态
<div class="prize-radio">
  <input type="radio" id="radio<?= $key +1 ?>" name="prizeradio">
  <label for="radio<?= $key +1 ?>"></label>
</div>

//选中状态，同radio
<input type="checkbox" id="awesome1" checked>
 //常规不可点
 <input type="checkbox" id="awesome2" disabled>
 //选中不可点击
 <input type="checkbox" id="awesome3" disabled class="checked">  

 css 美化
.prize-radio{
      input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
      }
      input[type="radio"] + label {
        cursor: pointer;
        position: relative;
        line-height: 12px;
        user-select: none;
      }
      input[type="radio"] + label:not(:nth-of-type(1)) {
        margin-top: 29px;
        margin-bottom: 29px;
      }
      input[type="radio"]:checked + label{
        color: #0091FF;
      }
    //单选框的样式
      input[type="radio"] + label::before{
        content: "";
        display: inline-block;
        width: 24px; height: 24px;
        border-radius: 50%;
        vertical-align: top;
        margin-right: .2em;
        border: 1px solid #ccc;
        background-color: #fff;
        transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
      }
      input[type="radio"]:not(:disabled) + label:hover::before{
        border-color: #0091FF;
      }
    //（制作样式1）对勾样式制作1 
      input[type="radio"] + label::after{
        content: "";
        display: inline-block;
        width: 5px;
        height: 13px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        position: absolute;
        left: 9px;
        top: 3px;
        transform: rotate(45deg) scale(0);
        transition: all .2s ease-in-out;
      }
      input[type="radio"]:checked + label::before{
        border-color: #0091FF !important;
        background-color: #0091FF;
      }
      input[type="radio"]:checked + label::after{
        transform: rotate(45deg) scale(1);
        transition: all .2s ease-in-out;
      }
    //不可点击的背景色设置-----不常用
    input[type="checkbox"]:disabled + label::before,
    input[type="checkbox"]:disabled.checked + label::before{
      background-color: #f2f2f2;
    }
  //不可点击的文本框对勾颜色设置--不常用
    input[type="checkbox"]:disabled.checked + label::after{
      border-color: #ccc;
      transform: rotate(45deg) scale(1);
    }
  //****制作样式1 end******
  
    //***（制作样式2）圆圈
  //after单选框中间的选中效果
  input[type="radio"] + label::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    left: 4px; top: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform .2s ease-in-out;
  }

  input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1);
    transition: transform .2s ease-in-out;
  }
  //disabled 不常用
  input[type="radio"]:disabled + label::before,
  input[type="radio"]:disabled.checked + label::before {
    background-color: #f2f2f2;
  }
  //不常用
  input[type="radio"]:disabled.checked + label::after {
    border-color: #ccc;
    background-color: #ccc;
    transform: translateY(-50%) scale(1);
  }
  //****制作样式2 end******
}  

js传参数操作：尤其涉及到交互，需要把选中商品的的id呀，价格呀，传递给后台，这时候就常用的东西都如下操作啦

 //定义购买方法
function handlePrizeBuy(){
    $(document).off('click','.js_submit-prizebuy').on('click','.js_submit-prizebuy',function(){
        var $t=$(this),
        active_id=$t.attr('active-id'),//这是都是藏在属性里面的值
        user_id=$t.attr("user-id");
      //prizeradio单选的名字，如果选中的话
        if ($('input[name="prizeradio"]').is(':checked')) {
          //$checkinput 为选择的元素
            var $checkinput=$('input[name="prizeradio"]:checked');
            var goodsid= $checkinput.parent().attr('goods-id');
            var price=$checkinput.parent().attr('goods-price');
            $.ajax({
                type : 'POST',
                url: '/cart/change',
                data : {
                    "come":2,
                    "data":[
                        {
                            "user_id": user_id,
                            "goods_id": goodsid,
                            "amount": 1,
                            "unit_price": price,
                            "oper_mode": 0
                        }
                    ]
                },
                success : function(data) {
                   
                }
            });
            
        }
        else{
            ajax_handle_message('请选择至少一种'); 
        }
    })
}
(function(){
    handlePrizeBuy();//调用购买方法
})();