仿iOS绿色切换按钮（input[type="checkbox"]），切换按钮改变input的checked属性值

 <div class="box">
        <header>iOS按钮效果</header>
        <div class="phone">
            <span class="btn btnActive">
                <input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
            </span>

            <span class="btn btnActive">
                <input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
            </span>

            <span class="btn btnActive">
                <input type="checkbox" name="iosStyle" id="btn0" class="btn0" checked>
            </span>
        </div>
    </div>

        .box {

            margin: 0 auto;
            text-align: center;
        }

        header {
            max-width: 768px;
            color: #111111;
        }

        .phone {
            width: 100%;
            text-align: center;
        }

        .btn {
            display: block;
            width: 50px;
            height: 23px;
            border-radius: 15px;
            margin: 40px auto;
            position: relative;
        }

        .btn0 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
        }

        .btn:before {
            content: ' ';
            position: absolute;
            top: 1px;
            bottom: 0;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            box-shadow: 0 0 2px #444444;
            
        }

        .btnActive {
            background-color: #65da65;
            border: 2px solid #65da65;
        }

        .btnActive::before {
            background-color: #ffffff;
            right: 1px;

        }

        .btnunActive {
            background-color: #ffffff;
            border: 2px solid #eeeeee;
        }

        .btnunActive::before {
            background-color: #65da65;
            left: 0;
            top: 0;
            width: 23px;
            height: 23px;

        }

  <script>
        $(function () {
            var btn = $("input[name='iosStyle']");
            $("input[name='iosStyle']").each(function (i) {
                $(this).click(function () {
                    // console.log($(this).parent());
                    var _this = $(this).parent();
                    if (_this.hasClass('btnActive')) {
                        _this.removeClass('btnActive');
                        _this.addClass('btnunActive');
                        $(this).eq(0).attr("checked", false);
                    } else if (_this.hasClass('btnunActive')) {
                        _this.removeClass('btnunActive');
                        _this.addClass('btnActive');
                        $(this).eq(0).attr("checked", true);
                    }
                });
            });
        })
    </script>