更改radio选中后的样式，并设置radio的点击事件

思路：设置input隐藏，然后使用input后的span，设置样式，代替原始的input选中后效果，点击label中文本或者radio即可选中

html:                 

  <div class="radio-text">

                                    <label for="jD">    

                                        <input type="radio" name="wuliu" value="1" id="jD" class="input_radio" checked>

                                        <span class="span_radio"></span>                              

                                        集约京东

                                     </label>

                                </div>

css:    

 

.input_radio {

                display: none;

            }

 .span_radio {

                width: 14px;

                height: 14px;

                display: inline-block;

                background-color: #fff;

                margin-right: 4px;

                margin-top: 4px;

                border-radius: 100%;

                position: relative;

                border: 1px solid #D575ED;

              // box-shadow: 0px 0px 2px 1px lightgrey;

            }

            

            .input_radio:checked+.span_radio::after {

                width: 8px;

                height: 8px;

                content: '';

                background-color: #D575ED;

                /* display: inline-block; */

                border-radius: 100%;

                display: block;

                position: absolute;

                text-align: center;

                top: 2px;

                left: 2px;

                /* //使用百分比,选中后不能都在中间显示 */

            }

           .s_radio:checked+.radio_checked:hover::after  {
                background-color: palevioletred;
            }

 

js:  radio的点击事件

   $('input:radio[name="wuliu"]').click(function() {

     let checkValue = $('input:radio[name="wuliu"]:checked').val();

            });