可改变颜色的单选按钮，jQuery仿input[type="radio"]按钮

html

<div class="checked-radio">
        <ul class="checked-radioitems">
            <li class="radioItem">
                <div class="radio_bg">
                    <span class="radio-checked"></span>
                </div>
                <label>男</label>
            </li>
            <li class="radioItem">
                <div class="radio_bg">

                </div>
                <label>女</label>
            </li>
        </ul>
</div>

css

 .radioItem {
            display: block;
            line-height: 40px;
            cursor: pointer;
            position: relative;
            width: 100%;
        }

        .radio_bg {
            width: 16PX;
            height: 16PX;
            line-height: 40px;
            border-radius: 50%;
            border: 1px solid #379392;
            background: #ffffff;
            display: block;
            float: left;
            margin: 12px 0;
        }

        .radio_bg+label {
            height: 40px;
            line-height: 40px;
            display: block;
            font-size: 16px;
            color: #222222;
            float: left;
            margin: 0 15px;
        }

        .radio-checked {
            width: 12px;
            height: 12px;
            display: block;
            margin: 2px auto;
            border-radius: 50%;
            background: #379392;
            animation: 0.5s show1;
        }

        @keyframes show1 {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

js

$(".checked-radioitems li").click(function () {
    $(this).children(".radio_bg").append("<span class='radio-checked'></span>").parent().siblings().children(".radio_bg").empty();
})